From eee57bc3346f2669e2a5f691a5b446d2df6333f1 Mon Sep 17 00:00:00 2001
From: tomeredlich <tomer.redlich@gmail.com>
Date: Sun, 5 Apr 2026 19:19:42 +0300
Subject: [PATCH 1/3] feat: add swipe-based onboarding flow with hot takes
 cards

Introduce a standalone onboarding swipe experience gated by feature flag with URL preview override, reusing Hot Takes swipe behavior while layering onboarding-specific progress, card content, and guidance UI.

Made-with: Cursor
---
 packages/shared/src/components/MainLayout.tsx |  40 +-
 .../modals/hotTakes/HotAndColdModal.tsx       | 465 ++++++++++++++----
 packages/shared/src/lib/constants.ts          |   1 +
 packages/shared/src/lib/featureManagement.ts  |   2 +
 packages/webapp/pages/_app.tsx                |  34 +-
 packages/webapp/pages/onboarding/swipe.tsx    | 289 +++++++++++
 6 files changed, 729 insertions(+), 102 deletions(-)
 create mode 100644 packages/webapp/pages/onboarding/swipe.tsx

diff --git a/packages/shared/src/components/MainLayout.tsx b/packages/shared/src/components/MainLayout.tsx
index 4af27936ce0..6e1ba91063a 100644
--- a/packages/shared/src/components/MainLayout.tsx
+++ b/packages/shared/src/components/MainLayout.tsx
@@ -17,7 +17,7 @@ import { PromptElement } from './modals/Prompt';
 import { useNotificationParams } from '../hooks/useNotificationParams';
 import { useAuthContext } from '../contexts/AuthContext';
 import { SharedFeedPage } from './utilities';
-import { isTesting, onboardingUrl } from '../lib/constants';
+import { isTesting, onboardingUrl, swipeOnboardingUrl } from '../lib/constants';
 import { useBanner } from '../hooks/useBanner';
 import { useGrowthBookContext } from './GrowthBookProvider';
 import {
@@ -33,6 +33,8 @@ import PlusMobileEntryBanner from './banners/PlusMobileEntryBanner';
 import usePlusEntry from '../hooks/usePlusEntry';
 import { SearchProvider } from '../contexts/search/SearchContext';
 import { FeedbackWidget } from './feedback';
+import { useConditionalFeature } from '../hooks/useConditionalFeature';
+import { swipeOnboardingFeature } from '../lib/featureManagement';
 
 const GoBackHeaderMobile = dynamic(
   () =>
@@ -47,6 +49,7 @@ const Sidebar = dynamic(() =>
     (mod) => mod.Sidebar,
   ),
 );
+const swipeOnboardingPreviewQueryKey = 'swipeOnboardingPreview';
 
 export interface MainLayoutProps
   extends Omit<MainLayoutHeaderProps, 'onMobileSidebarToggle'>,
@@ -94,6 +97,20 @@ function MainLayoutComponent({
   const isLaptopXL = useViewSize(ViewSize.LaptopXL);
   const { screenCenteredOnMobileLayout } = useFeedLayout();
   const { isNotificationsReady, unreadCount } = useNotificationContext();
+  const isPageReady =
+    (growthbook?.ready && router?.isReady && isAuthReady) || isTesting;
+  const { value: isSwipeOnboardingEnabled } = useConditionalFeature({
+    feature: swipeOnboardingFeature,
+    shouldEvaluate: !user,
+  });
+  const swipeOnboardingPreviewQuery =
+    router.query[swipeOnboardingPreviewQueryKey];
+  const isSwipeOnboardingPreviewForced =
+    swipeOnboardingPreviewQuery === '1' ||
+    swipeOnboardingPreviewQuery === 'true' ||
+    (Array.isArray(swipeOnboardingPreviewQuery) &&
+      (swipeOnboardingPreviewQuery.includes('1') ||
+        swipeOnboardingPreviewQuery.includes('true')));
   useNotificationParams();
 
   useEffect(() => {
@@ -111,8 +128,6 @@ function MainLayoutComponent({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isNotificationsReady, unreadCount, hasLoggedImpression]);
 
-  const isPageReady =
-    (growthbook?.ready && router?.isReady && isAuthReady) || isTesting;
   const isPageApplicableForOnboarding =
     !page || feeds.includes(page) || isCustomFeed;
   const shouldRedirectOnboarding =
@@ -126,7 +141,11 @@ function MainLayoutComponent({
     const entries = Object.entries(router.query);
 
     if (entries.length === 0) {
-      router.push(onboardingUrl);
+      router.push(
+        isSwipeOnboardingEnabled || isSwipeOnboardingPreviewForced
+          ? swipeOnboardingUrl
+          : onboardingUrl,
+      );
       return;
     }
 
@@ -136,8 +155,17 @@ function MainLayoutComponent({
       params.append(key, value as string);
     });
 
-    router.push(`${onboardingUrl}?${params.toString()}`);
-  }, [shouldRedirectOnboarding, router]);
+    const destination =
+      isSwipeOnboardingEnabled || isSwipeOnboardingPreviewForced
+        ? swipeOnboardingUrl
+        : onboardingUrl;
+    router.push(`${destination}?${params.toString()}`);
+  }, [
+    isSwipeOnboardingEnabled,
+    isSwipeOnboardingPreviewForced,
+    shouldRedirectOnboarding,
+    router,
+  ]);
 
   const ignoredUtmMediumForLogin = ['slack'];
   const utmSource = router?.query?.utm_source;
diff --git a/packages/shared/src/components/modals/hotTakes/HotAndColdModal.tsx b/packages/shared/src/components/modals/hotTakes/HotAndColdModal.tsx
index 1f5a6b3a5cc..20571d95088 100644
--- a/packages/shared/src/components/modals/hotTakes/HotAndColdModal.tsx
+++ b/packages/shared/src/components/modals/hotTakes/HotAndColdModal.tsx
@@ -1,5 +1,11 @@
-import type { ReactElement } from 'react';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import type { ReactElement, ReactNode } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { useSwipeable } from 'react-swipeable';
 import classNames from 'classnames';
 import type { ModalProps } from '../common/Modal';
@@ -35,6 +41,7 @@ const SKIP_DISMISS_FLY_DISTANCE = 600;
 const SKIP_DRAG_ELASTICITY_FACTOR = 0.3;
 const COLD_ACCENT_COLOR = '#123a88';
 const HOT_TAKE_CARD_HEIGHT = '28rem';
+const ONBOARDING_CARD_HEIGHT = '24rem';
 
 const getElasticDelta = (delta: number): number => {
   const absoluteDelta = Math.abs(delta);
@@ -794,6 +801,146 @@ const HotTakeCard = ({
   );
 };
 
+const OnboardingPostCard = ({
+  card,
+  isTop,
+  offset,
+  swipeDelta,
+  skipDeltaY = 0,
+  isDismissAnimating,
+  isDragging,
+  dismissDurationMs,
+}: {
+  card: OnboardingSwipeCard;
+  isTop: boolean;
+  offset: number;
+  swipeDelta: number;
+  skipDeltaY?: number;
+  isDismissAnimating: boolean;
+  isDragging: boolean;
+  dismissDurationMs: number;
+}): ReactElement => {
+  const isSkipAnimating = isTop && isDismissAnimating && skipDeltaY !== 0;
+  let swipeDirection: 'left' | 'right' | null = null;
+  if (isTop && Math.abs(swipeDelta) > 20) {
+    swipeDirection = swipeDelta > 0 ? 'right' : 'left';
+  }
+  const swipeIntensity = isTop
+    ? Math.min(Math.abs(swipeDelta) / SWIPE_THRESHOLD, 1)
+    : 0;
+  const rotation = isTop ? Math.max(Math.min(swipeDelta * 0.08, 18), -18) : 0;
+  const translateX = isTop ? swipeDelta : 0;
+  const stackScale = isTop ? 1 : 1 - offset * 0.05;
+  const translateY = isTop ? 0 : offset * 8;
+  const dismissDistance = isSkipAnimating
+    ? SKIP_DISMISS_FLY_DISTANCE
+    : DISMISS_FLY_DISTANCE;
+  const dismissProgress =
+    isTop && isDismissAnimating
+      ? Math.min(
+          Math.abs(isSkipAnimating ? skipDeltaY : swipeDelta) / dismissDistance,
+          1,
+        )
+      : 0;
+  const scale = isTop ? 1 - dismissProgress * 0.06 : stackScale;
+  const dismissLift = isTop ? dismissProgress * -22 : 0;
+  const translateYWithOutro =
+    translateY + dismissLift + (isTop ? skipDeltaY : 0);
+
+  let transition =
+    'transform 0.3s ease, border-color 0.2s ease, box-shadow 0.2s ease';
+  if (isTop) {
+    if (isDismissAnimating) {
+      transition = `transform ${dismissDurationMs}ms cubic-bezier(0.16, 0.86, 0.22, 1), opacity ${dismissDurationMs}ms ease-out, filter ${dismissDurationMs}ms ease-out`;
+    } else if (isDragging) {
+      transition = 'none';
+    } else {
+      transition = 'transform 0.28s cubic-bezier(0.22, 1, 0.36, 1)';
+    }
+  }
+
+  return (
+    <div
+      className={classNames(
+        'absolute inset-0 flex select-none flex-col overflow-hidden rounded-16',
+        isTop
+          ? 'border border-border-subtlest-tertiary bg-background-popover'
+          : 'bg-background-default',
+        isTop && 'cursor-grab active:cursor-grabbing',
+        !isTop && 'pointer-events-none',
+      )}
+      onDragStart={(event) => event.preventDefault()}
+      style={{
+        transform: `translateX(${translateX}px) translateY(${translateYWithOutro}px) rotate(${rotation}deg) scale(${scale})`,
+        zIndex: 10 - offset,
+        transition,
+        opacity: isTop ? 1 - dismissProgress * 0.75 : 1,
+        filter:
+          isTop && isDismissAnimating
+            ? `blur(${dismissProgress * 1.8}px)`
+            : undefined,
+        boxShadow: isTop
+          ? '0 1.25rem 2.75rem -0.75rem rgba(0, 0, 0, 0.45)'
+          : '0 0.75rem 1.75rem -0.75rem rgba(0, 0, 0, 0.32)',
+      }}
+    >
+      {swipeDirection && (
+        <div
+          className={classNames(
+            'z-20 absolute left-1/2 top-3 -translate-x-1/2 rounded-10 px-3 py-1 font-bold text-white typo-callout',
+            swipeDirection === 'right'
+              ? 'bg-accent-cabbage-default'
+              : 'bg-accent-bacon-default',
+          )}
+          style={{ opacity: swipeIntensity }}
+        >
+          {swipeDirection === 'right' ? 'INTERESTING' : 'NOT INTERESTING'}
+        </div>
+      )}
+      {card.image ? (
+        <img
+          alt={card.title ?? 'Popular post'}
+          className="h-[14rem] w-full object-cover"
+          draggable={false}
+          src={card.image}
+        />
+      ) : (
+        <div className="h-[14rem] w-full bg-surface-hover" />
+      )}
+      <div className="flex flex-1 flex-col gap-3 p-4">
+        <div className="flex items-center gap-2">
+          {card.source?.image ? (
+            <img
+              alt={card.source.name ?? 'Source'}
+              className="size-6 rounded-full object-cover"
+              draggable={false}
+              src={card.source.image}
+            />
+          ) : (
+            <div className="size-6 rounded-full bg-surface-hover" />
+          )}
+          <Typography
+            type={TypographyType.Footnote}
+            color={TypographyColor.Secondary}
+            className="truncate"
+            bold
+          >
+            {card.source?.name || 'daily.dev'}
+          </Typography>
+        </div>
+        <Typography
+          type={TypographyType.Title3}
+          color={TypographyColor.Primary}
+          className="line-clamp-4 text-balance"
+          bold
+        >
+          {card.title || 'Popular developer story'}
+        </Typography>
+      </div>
+    </div>
+  );
+};
+
 const EmptyState = ({
   onClose,
   username,
@@ -834,10 +981,45 @@ const EmptyState = ({
   </div>
 );
 
+type SwipeActionDirection = 'left' | 'right' | 'skip';
+
+export interface OnboardingSwipeCard {
+  id: string;
+  title?: string;
+  image?: string | null;
+  source?: {
+    name?: string | null;
+    image?: string | null;
+  } | null;
+}
+
+interface HotAndColdModalProps extends ModalProps {
+  title?: string;
+  headerSlot?: ReactNode;
+  topSlot?: ReactNode;
+  bottomSlot?: ReactNode;
+  showHeader?: boolean;
+  showDefaultActions?: boolean;
+  showAddHotTakeButton?: boolean;
+  onSwipeAction?: (direction: SwipeActionDirection) => void;
+  onboardingCards?: OnboardingSwipeCard[];
+  onboardingCardsLoading?: boolean;
+}
+
 const HotAndColdModal = ({
   onRequestClose,
+  title = 'Hot Takes',
+  headerSlot,
+  topSlot,
+  bottomSlot,
+  showHeader = true,
+  showDefaultActions = true,
+  showAddHotTakeButton = true,
+  onSwipeAction,
+  onboardingCards,
+  onboardingCardsLoading = false,
   ...props
-}: ModalProps): ReactElement => {
+}: HotAndColdModalProps): ReactElement => {
   const { currentTake, nextTake, isEmpty, isLoading, dismissCurrent } =
     useDiscoverHotTakes();
   const { toggleUpvote, toggleDownvote, cancelHotTakeVote } = useVoteHotTake();
@@ -855,6 +1037,25 @@ const HotAndColdModal = ({
   const dismissTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const [skipDelta, setSkipDelta] = useState(0);
   const swipeDeltaYRef = useRef(0);
+  const [dismissedCardIds, setDismissedCardIds] = useState<Set<string>>(
+    () => new Set<string>(),
+  );
+
+  const isOnboardingMode = !!onboardingCards;
+  const availableOnboardingCards = useMemo(
+    () =>
+      (onboardingCards ?? []).filter((card) => !dismissedCardIds.has(card.id)),
+    [dismissedCardIds, onboardingCards],
+  );
+  const currentOnboardingCard = availableOnboardingCards[0];
+  const nextOnboardingCard = availableOnboardingCards[1];
+  const isModalLoading = isOnboardingMode ? onboardingCardsLoading : isLoading;
+  const isModalEmpty = isOnboardingMode
+    ? !isModalLoading && !currentOnboardingCard
+    : isEmpty;
+  const cardHeight = isOnboardingMode
+    ? ONBOARDING_CARD_HEIGHT
+    : HOT_TAKE_CARD_HEIGHT;
 
   useEffect(() => {
     animatingTakeIdRef.current = animatingTakeId;
@@ -926,17 +1127,29 @@ const HotAndColdModal = ({
         swipeDeltaYRef.current = 0;
         animatingTakeIdRef.current = null;
         setAnimatingTakeId(null);
-        dismissCurrent();
+        if (isOnboardingMode && currentOnboardingCard) {
+          setDismissedCardIds((prev) => {
+            const next = new Set(prev);
+            next.add(currentOnboardingCard.id);
+            return next;
+          });
+        } else {
+          dismissCurrent();
+        }
         setIsAnimating(false);
         dismissTimerRef.current = null;
       }, durationMs);
     },
-    [dismissCurrent],
+    [currentOnboardingCard, dismissCurrent, isOnboardingMode],
   );
 
   const handleDismiss = useCallback(
     (direction: 'left' | 'right', source: 'swipe' | 'button' = 'swipe') => {
-      if (!currentTake || isAnimating) {
+      const currentItemId = isOnboardingMode
+        ? currentOnboardingCard?.id
+        : currentTake?.id;
+
+      if (!currentItemId || isAnimating) {
         return;
       }
 
@@ -948,21 +1161,24 @@ const HotAndColdModal = ({
 
       logEvent({
         event_name: LogEvent.VoteHotAndCold,
-        target_id: currentTake.id,
-        extra: JSON.stringify({ vote, direction, hotTakeId: currentTake.id }),
+        target_id: currentItemId,
+        extra: JSON.stringify({ vote, direction, hotTakeId: currentItemId }),
       });
 
-      if (direction === 'right') {
-        toggleUpvote({
-          payload: currentTake,
-          origin: Origin.HotAndCold,
-        });
-      } else {
-        toggleDownvote({
-          payload: currentTake,
-          origin: Origin.HotAndCold,
-        });
+      if (!isOnboardingMode && currentTake) {
+        if (direction === 'right') {
+          toggleUpvote({
+            payload: currentTake,
+            origin: Origin.HotAndCold,
+          });
+        } else {
+          toggleDownvote({
+            payload: currentTake,
+            origin: Origin.HotAndCold,
+          });
+        }
       }
+      onSwipeAction?.(direction);
 
       let initialPush: number;
       let flyDistance: number;
@@ -986,7 +1202,7 @@ const HotAndColdModal = ({
       setSwipeDelta(initialPush);
 
       startDismissAnimation({
-        takeId: currentTake.id,
+        takeId: currentItemId,
         durationMs,
         flyDelayMs: isButtonSource ? BUTTON_FLY_KICK_DELAY_MS : 0,
         onFly: () => setSwipeDelta(flyDistance),
@@ -994,30 +1210,40 @@ const HotAndColdModal = ({
     },
     [
       currentTake,
+      currentOnboardingCard,
+      isOnboardingMode,
       isAnimating,
       startDismissAnimation,
       toggleDownvote,
       toggleUpvote,
       logEvent,
+      onSwipeAction,
       swipeDelta,
     ],
   );
 
   const handleSkip = useCallback(
     (source: 'swipe' | 'button' = 'button') => {
-      if (!currentTake || isAnimating) {
+      const currentItemId = isOnboardingMode
+        ? currentOnboardingCard?.id
+        : currentTake?.id;
+
+      if (!currentItemId || isAnimating) {
         return;
       }
 
       logEvent({
         event_name: LogEvent.SkipHotTake,
-        target_id: currentTake.id,
+        target_id: currentItemId,
       });
 
-      cancelHotTakeVote({ id: currentTake.id });
+      if (!isOnboardingMode && currentTake) {
+        cancelHotTakeVote({ id: currentTake.id });
+      }
+      onSwipeAction?.('skip');
 
       startDismissAnimation({
-        takeId: currentTake.id,
+        takeId: currentItemId,
         durationMs: SKIP_DISMISS_ANIMATION_MS,
         flyDelayMs: source === 'button' ? BUTTON_FLY_KICK_DELAY_MS : 0,
         onFly: () => setSkipDelta(-SKIP_DISMISS_FLY_DISTANCE),
@@ -1026,14 +1252,20 @@ const HotAndColdModal = ({
     [
       cancelHotTakeVote,
       currentTake,
+      currentOnboardingCard,
+      isOnboardingMode,
       isAnimating,
       startDismissAnimation,
       logEvent,
+      onSwipeAction,
     ],
   );
 
+  const currentCardId = isOnboardingMode
+    ? currentOnboardingCard?.id
+    : currentTake?.id;
   const isCurrentTakeAnimating =
-    !!currentTake && isAnimating && animatingTakeId === currentTake.id;
+    !!currentCardId && isAnimating && animatingTakeId === currentCardId;
   const cardSwipeDelta =
     isAnimating && !isCurrentTakeAnimating ? 0 : swipeDelta;
   const cardSkipDelta = isAnimating && !isCurrentTakeAnimating ? 0 : skipDelta;
@@ -1089,9 +1321,10 @@ const HotAndColdModal = ({
 
   return (
     <Modal {...props} onRequestClose={onRequestClose} size={ModalSize.Small}>
-      <Modal.Header title="Hot Takes" />
+      {showHeader && <Modal.Header title={title} />}
       <Modal.Body className="overflow-hidden !p-0">
-        {isLoading && (
+        {headerSlot}
+        {isModalLoading && (
           <div className="flex flex-1 items-center justify-center p-6">
             <Typography
               type={TypographyType.Body}
@@ -1102,85 +1335,129 @@ const HotAndColdModal = ({
           </div>
         )}
 
-        {!isLoading && isEmpty && (
+        {!isModalLoading && isModalEmpty && (
           <EmptyState onClose={onRequestClose} username={user?.username} />
         )}
 
-        {!isLoading && !isEmpty && currentTake && (
+        {!isModalLoading && !isModalEmpty && currentCardId && (
           <>
+            {topSlot}
             <div
               {...handlers}
-              className="relative mx-4 mt-2 select-none"
-              style={{ height: HOT_TAKE_CARD_HEIGHT }}
+              className={classNames(
+                'relative mx-4 mt-2 select-none self-center',
+                isOnboardingMode
+                  ? 'w-[calc(100%-5rem)] max-w-[17.5rem]'
+                  : 'w-[calc(100%-2rem)]',
+              )}
+              style={{ height: cardHeight }}
             >
-              {nextTake && (
-                <HotTakeCard
-                  key={nextTake.id}
-                  hotTake={nextTake}
-                  isTop={false}
-                  offset={1}
-                  swipeDelta={0}
-                  isDismissAnimating={false}
-                  isDragging={false}
-                  dismissDurationMs={DISMISS_ANIMATION_MS}
-                />
+              {isOnboardingMode ? (
+                <>
+                  {nextOnboardingCard && (
+                    <OnboardingPostCard
+                      key={nextOnboardingCard.id}
+                      card={nextOnboardingCard}
+                      isTop={false}
+                      offset={1}
+                      swipeDelta={0}
+                      isDismissAnimating={false}
+                      isDragging={false}
+                      dismissDurationMs={DISMISS_ANIMATION_MS}
+                    />
+                  )}
+                  {currentOnboardingCard && (
+                    <OnboardingPostCard
+                      key={currentOnboardingCard.id}
+                      card={currentOnboardingCard}
+                      isTop
+                      offset={0}
+                      swipeDelta={cardSwipeDelta}
+                      skipDeltaY={cardSkipDelta}
+                      isDismissAnimating={isCurrentTakeAnimating}
+                      isDragging={isDragging}
+                      dismissDurationMs={dismissDurationMs}
+                    />
+                  )}
+                </>
+              ) : (
+                <>
+                  {nextTake && (
+                    <HotTakeCard
+                      key={nextTake.id}
+                      hotTake={nextTake}
+                      isTop={false}
+                      offset={1}
+                      swipeDelta={0}
+                      isDismissAnimating={false}
+                      isDragging={false}
+                      dismissDurationMs={DISMISS_ANIMATION_MS}
+                    />
+                  )}
+                  {currentTake && (
+                    <HotTakeCard
+                      key={currentTake.id}
+                      hotTake={currentTake}
+                      isTop
+                      offset={0}
+                      swipeDelta={cardSwipeDelta}
+                      skipDeltaY={cardSkipDelta}
+                      isDismissAnimating={isCurrentTakeAnimating}
+                      isDragging={isDragging}
+                      dismissDurationMs={dismissDurationMs}
+                    />
+                  )}
+                </>
               )}
-              <HotTakeCard
-                key={currentTake.id}
-                hotTake={currentTake}
-                isTop
-                offset={0}
-                swipeDelta={cardSwipeDelta}
-                skipDeltaY={cardSkipDelta}
-                isDismissAnimating={isCurrentTakeAnimating}
-                isDragging={isDragging}
-                dismissDurationMs={dismissDurationMs}
-              />
             </div>
 
-            <div className="flex items-center justify-center gap-4 p-4 pt-3">
-              <Button
-                variant={ButtonVariant.Float}
-                size={ButtonSize.Large}
-                icon={
-                  <span className="text-[1.375rem] leading-none" aria-hidden>
-                    ❄️
-                  </span>
-                }
-                onClick={() => handleDismiss('left', 'button')}
-                disabled={isAnimating}
-                className="!size-14 rounded-full"
-                aria-label="Cold take - downvote"
-              />
-              <Button
-                variant={ButtonVariant.Float}
-                size={ButtonSize.Large}
-                icon={
-                  <span className="text-[1.375rem] leading-none" aria-hidden>
-                    😐
-                  </span>
-                }
-                onClick={() => handleSkip('button')}
-                disabled={isAnimating}
-                className="!size-12 rounded-full"
-                aria-label="Skip hot take"
-              />
-              <Button
-                variant={ButtonVariant.Float}
-                size={ButtonSize.Large}
-                icon={
-                  <span className="text-[1.375rem] leading-none" aria-hidden>
-                    🔥
-                  </span>
-                }
-                onClick={() => handleDismiss('right', 'button')}
-                disabled={isAnimating}
-                className="!size-14 rounded-full"
-                aria-label="Hot take - upvote"
-              />
-            </div>
+            {showDefaultActions && (
+              <div className="flex items-center justify-center gap-4 p-4 pt-3">
+                <Button
+                  variant={ButtonVariant.Float}
+                  size={ButtonSize.Large}
+                  icon={
+                    <span className="text-[1.375rem] leading-none" aria-hidden>
+                      ❄️
+                    </span>
+                  }
+                  onClick={() => handleDismiss('left', 'button')}
+                  disabled={isAnimating}
+                  className="!size-14 rounded-full"
+                  aria-label="Cold take - downvote"
+                />
+                <Button
+                  variant={ButtonVariant.Float}
+                  size={ButtonSize.Large}
+                  icon={
+                    <span className="text-[1.375rem] leading-none" aria-hidden>
+                      😐
+                    </span>
+                  }
+                  onClick={() => handleSkip('button')}
+                  disabled={isAnimating}
+                  className="!size-12 rounded-full"
+                  aria-label="Skip hot take"
+                />
+                <Button
+                  variant={ButtonVariant.Float}
+                  size={ButtonSize.Large}
+                  icon={
+                    <span className="text-[1.375rem] leading-none" aria-hidden>
+                      🔥
+                    </span>
+                  }
+                  onClick={() => handleDismiss('right', 'button')}
+                  disabled={isAnimating}
+                  className="!size-14 rounded-full"
+                  aria-label="Hot take - upvote"
+                />
+              </div>
+            )}
+
+            {bottomSlot}
 
-            {user?.username && (
+            {showAddHotTakeButton && user?.username && (
               <div className="px-4 pb-4">
                 <Button
                   variant={ButtonVariant.Tertiary}
diff --git a/packages/shared/src/lib/constants.ts b/packages/shared/src/lib/constants.ts
index 2b5c1da02db..f151b8b3e6d 100644
--- a/packages/shared/src/lib/constants.ts
+++ b/packages/shared/src/lib/constants.ts
@@ -54,6 +54,7 @@ export const isChrome = (): boolean =>
 
 export const webappUrl = process.env.NEXT_PUBLIC_WEBAPP_URL as string;
 export const onboardingUrl = `${webappUrl}onboarding`;
+export const swipeOnboardingUrl = `${webappUrl}onboarding/swipe`;
 export const plusUrl = `${webappUrl}plus`;
 export const managePlusUrl = 'https://r.daily.dev/billing';
 export const plusDetailsUrl = 'https://r.daily.dev/plus-onboarding';
diff --git a/packages/shared/src/lib/featureManagement.ts b/packages/shared/src/lib/featureManagement.ts
index 2649b7a121f..f8d5ab1f86d 100644
--- a/packages/shared/src/lib/featureManagement.ts
+++ b/packages/shared/src/lib/featureManagement.ts
@@ -151,6 +151,8 @@ export const sharedPostPreviewFeature = new Feature(
   false,
 );
 
+export const swipeOnboardingFeature = new Feature('swipe_onboarding', false);
+
 export const featureUpvoteCountThreshold = new Feature<{
   threshold: number;
   belowThresholdLabel: string;
diff --git a/packages/webapp/pages/_app.tsx b/packages/webapp/pages/_app.tsx
index 7fa921b35be..971778867a8 100644
--- a/packages/webapp/pages/_app.tsx
+++ b/packages/webapp/pages/_app.tsx
@@ -46,6 +46,8 @@ import { structuredCloneJsonPolyfill } from '@dailydotdev/shared/src/lib/structu
 import { fromCDN } from '@dailydotdev/shared/src/lib';
 import { useOnboardingActions } from '@dailydotdev/shared/src/hooks/auth';
 import { useCheckCoresRole } from '@dailydotdev/shared/src/hooks/useCheckCoresRole';
+import { useConditionalFeature } from '@dailydotdev/shared/src/hooks/useConditionalFeature';
+import { swipeOnboardingFeature } from '@dailydotdev/shared/src/lib/featureManagement';
 import {
   messageHandlerExists,
   postWebKitMessage,
@@ -89,6 +91,7 @@ const onboardingExcludedPaths = [
 const hotAndColdModalQueryKey = 'openModal';
 const hotAndColdModalQueryValue = 'hottakes';
 const hotAndColdModalLegacyQueryValue = 'hotAndCold';
+const swipeOnboardingPreviewQueryKey = 'swipeOnboardingPreview';
 const isOnboardingExcludedPath = (pathname: string): boolean =>
   onboardingExcludedPaths.some((path) => pathname.startsWith(path));
 
@@ -141,6 +144,12 @@ function InternalApp({ Component, pageProps, router }: AppProps): ReactElement {
   const { unreadCount } = useNotificationContext();
   const unreadText = getUnreadText(unreadCount);
   const { user, trackingId, isFunnel } = useAuthContext();
+  const {
+    value: isSwipeOnboardingEnabled,
+    isLoading: isSwipeOnboardingLoading,
+  } = useConditionalFeature({
+    feature: swipeOnboardingFeature,
+  });
   const { showBanner, onAcceptCookies, onOpenBanner, onHideBanner } =
     useCookieBanner();
   useWebVitals();
@@ -160,6 +169,14 @@ function InternalApp({ Component, pageProps, router }: AppProps): ReactElement {
     (Array.isArray(hotAndColdModalQuery) &&
       (hotAndColdModalQuery.includes(hotAndColdModalQueryValue) ||
         hotAndColdModalQuery.includes(hotAndColdModalLegacyQueryValue)));
+  const swipeOnboardingPreviewQuery =
+    router.query[swipeOnboardingPreviewQueryKey];
+  const isSwipeOnboardingPreviewForced =
+    swipeOnboardingPreviewQuery === '1' ||
+    swipeOnboardingPreviewQuery === 'true' ||
+    (Array.isArray(swipeOnboardingPreviewQuery) &&
+      (swipeOnboardingPreviewQuery.includes('1') ||
+        swipeOnboardingPreviewQuery.includes('true')));
 
   useEffect(() => {
     if (!shouldOpenHotAndColdFromQuery) {
@@ -196,12 +213,25 @@ function InternalApp({ Component, pageProps, router }: AppProps): ReactElement {
     if (
       !isFunnel &&
       isOnboardingActionsReady &&
+      (!isSwipeOnboardingLoading || isSwipeOnboardingPreviewForced) &&
       !isOnboardingComplete &&
       !isOnboardingExcludedPath(router.pathname)
     ) {
-      router.replace('/onboarding');
+      const destination =
+        isSwipeOnboardingEnabled || isSwipeOnboardingPreviewForced
+          ? '/onboarding/swipe'
+          : '/onboarding';
+      router.replace(destination);
     }
-  }, [isFunnel, isOnboardingActionsReady, router, isOnboardingComplete]);
+  }, [
+    isFunnel,
+    isOnboardingActionsReady,
+    isOnboardingComplete,
+    isSwipeOnboardingEnabled,
+    isSwipeOnboardingLoading,
+    isSwipeOnboardingPreviewForced,
+    router,
+  ]);
 
   useEffect(() => {
     const id = user?.id || trackingId;
diff --git a/packages/webapp/pages/onboarding/swipe.tsx b/packages/webapp/pages/onboarding/swipe.tsx
new file mode 100644
index 00000000000..95f29a604e6
--- /dev/null
+++ b/packages/webapp/pages/onboarding/swipe.tsx
@@ -0,0 +1,289 @@
+import type { ReactElement } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import classNames from 'classnames';
+import { useRouter } from 'next/router';
+import type { NextSeoProps } from 'next-seo';
+import AuthOptions from '@dailydotdev/shared/src/components/auth/AuthOptions';
+import { AuthDisplay } from '@dailydotdev/shared/src/components/auth/common';
+import type { AuthOptionsProps } from '@dailydotdev/shared/src/components/auth/common';
+import { OnboardingHeader } from '@dailydotdev/shared/src/components/onboarding';
+import {
+  FooterLinks,
+  withFeaturesBoundary,
+} from '@dailydotdev/shared/src/components';
+import { ErrorBoundary } from '@dailydotdev/shared/src/components/ErrorBoundary';
+import { useAuthContext } from '@dailydotdev/shared/src/contexts/AuthContext';
+import { redirectToApp } from '@dailydotdev/shared/src/features/onboarding/lib/utils';
+import { ActionType } from '@dailydotdev/shared/src/graphql/actions';
+import { useOnboardingActions } from '@dailydotdev/shared/src/hooks/auth';
+import { AuthTriggers } from '@dailydotdev/shared/src/lib/auth';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import {
+  DownvoteIcon,
+  UpvoteIcon,
+} from '@dailydotdev/shared/src/components/icons';
+import { IconSize } from '@dailydotdev/shared/src/components/Icon';
+import HotAndColdModal from '@dailydotdev/shared/src/components/modals/hotTakes/HotAndColdModal';
+import type { OnboardingSwipeCard } from '@dailydotdev/shared/src/components/modals/hotTakes/HotAndColdModal';
+import Logo, { LogoPosition } from '@dailydotdev/shared/src/components/Logo';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '@dailydotdev/shared/src/components/typography/Typography';
+import { useQuery } from '@tanstack/react-query';
+import { MOST_UPVOTED_FEED_QUERY } from '@dailydotdev/shared/src/graphql/feed';
+import { gqlClient } from '@dailydotdev/shared/src/graphql/common';
+import type { Post } from '@dailydotdev/shared/src/graphql/posts';
+import { useConditionalFeature } from '@dailydotdev/shared/src/hooks/useConditionalFeature';
+import { swipeOnboardingFeature } from '@dailydotdev/shared/src/lib/featureManagement';
+import { getPageSeoTitles } from '../../components/layouts/utils';
+import { defaultOpenGraph, defaultSeo } from '../../next-seo';
+
+const seoTitles = getPageSeoTitles('Swipe onboarding');
+const seo: NextSeoProps = {
+  title: seoTitles.title,
+  openGraph: { ...seoTitles.openGraph, ...defaultOpenGraph },
+  ...defaultSeo,
+};
+const swipeOnboardingPreviewQueryKey = 'swipeOnboardingPreview';
+const MIN_SWIPES_TO_CONTINUE = 10;
+
+interface PopularFeedQueryData {
+  page?: {
+    edges?: Array<{
+      node: Post;
+    }>;
+  };
+}
+
+function SwipeOnboardingPage(): ReactElement {
+  const router = useRouter();
+  const formRef = useRef<HTMLFormElement>(null as unknown as HTMLFormElement);
+  const { isAuthReady, isLoggedIn } = useAuthContext();
+  const { completeStep } = useOnboardingActions();
+  const [swipesCount, setSwipesCount] = React.useState(0);
+  const { data: cardsData, isPending: isCardsPending } =
+    useQuery<PopularFeedQueryData>({
+      queryKey: ['onboarding-swipe-popular-cards'],
+      queryFn: () =>
+        gqlClient.request(MOST_UPVOTED_FEED_QUERY, {
+          first: 80,
+          period: 30,
+        }),
+      enabled: isLoggedIn,
+      staleTime: 1000 * 60 * 2,
+    });
+  const {
+    value: isSwipeOnboardingEnabled,
+    isLoading: isSwipeOnboardingLoading,
+  } = useConditionalFeature({
+    feature: swipeOnboardingFeature,
+  });
+  const swipeOnboardingPreviewQuery =
+    router.query[swipeOnboardingPreviewQueryKey];
+  const isSwipeOnboardingPreviewForced =
+    router.isReady &&
+    (swipeOnboardingPreviewQuery === '1' ||
+      swipeOnboardingPreviewQuery === 'true' ||
+      (Array.isArray(swipeOnboardingPreviewQuery) &&
+        (swipeOnboardingPreviewQuery.includes('1') ||
+          swipeOnboardingPreviewQuery.includes('true'))));
+
+  useEffect(() => {
+    if (
+      !router.isReady ||
+      isSwipeOnboardingLoading ||
+      isSwipeOnboardingEnabled ||
+      isSwipeOnboardingPreviewForced
+    ) {
+      return;
+    }
+    router.replace('/onboarding').catch(() => null);
+  }, [
+    isSwipeOnboardingEnabled,
+    isSwipeOnboardingLoading,
+    isSwipeOnboardingPreviewForced,
+    router,
+  ]);
+
+  const onComplete = useCallback(async () => {
+    completeStep(ActionType.CompletedOnboarding);
+    completeStep(ActionType.EditTag);
+    completeStep(ActionType.ContentTypes);
+    await redirectToApp(router);
+  }, [completeStep, router]);
+
+  const onSwipeAction = useCallback(() => {
+    setSwipesCount((value) => value + 1);
+  }, []);
+
+  const authOptionProps: AuthOptionsProps = useMemo(
+    () => ({
+      simplified: true,
+      forceDefaultDisplay: true,
+      trigger: AuthTriggers.Onboarding,
+      formRef,
+      defaultDisplay: AuthDisplay.OnboardingSignup,
+      className: {
+        container: classNames('w-full rounded-none tablet:max-w-[30rem]'),
+        onboardingSignup: '!gap-5 !pb-5 tablet:gap-8 tablet:pb-8',
+      },
+      onboardingSignupButton: {
+        size: ButtonSize.Medium,
+        variant: ButtonVariant.Primary,
+      },
+    }),
+    [],
+  );
+  const onboardingCards = useMemo<OnboardingSwipeCard[]>(
+    () =>
+      (cardsData?.page?.edges ?? []).map(({ node }) => ({
+        id: node.id,
+        title: node.title,
+        image: node.image,
+        source: {
+          name: node.source?.name,
+          image: node.source?.image,
+        },
+      })),
+    [cardsData?.page?.edges],
+  );
+
+  if (!isAuthReady) {
+    return <div className="min-h-dvh bg-background-default" />;
+  }
+
+  if (!router.isReady) {
+    return <div className="min-h-dvh bg-background-default" />;
+  }
+
+  if (
+    !isSwipeOnboardingLoading &&
+    !isSwipeOnboardingEnabled &&
+    !isSwipeOnboardingPreviewForced
+  ) {
+    return <div className="min-h-dvh bg-background-default" />;
+  }
+
+  if (!isLoggedIn) {
+    return (
+      <div className="flex min-h-dvh w-full flex-col items-center bg-background-default">
+        <OnboardingHeader />
+        <div className="flex w-full flex-1 items-center justify-center px-4">
+          <AuthOptions {...authOptionProps} />
+        </div>
+        <FooterLinks className="mx-auto pb-6" />
+      </div>
+    );
+  }
+
+  const progress = Math.min((swipesCount / 40) * 100, 100);
+  const progressPercent = Math.round(progress);
+  const canContinue = swipesCount >= MIN_SWIPES_TO_CONTINUE;
+
+  return (
+    <div className="flex min-h-dvh items-center justify-center bg-background-default px-4 py-6">
+      <HotAndColdModal
+        isOpen
+        showHeader={false}
+        showDefaultActions={false}
+        showAddHotTakeButton={false}
+        onSwipeAction={(direction) => {
+          if (direction === 'left' || direction === 'right') {
+            onSwipeAction();
+          }
+        }}
+        onboardingCards={onboardingCards}
+        onboardingCardsLoading={isCardsPending}
+        topSlot={
+          <div className="pointer-events-none mb-1 mt-2 w-[calc(100%-5rem)] max-w-[17.5rem] select-none self-center p-4">
+            <div className="mb-3 flex items-center justify-between">
+              <Typography bold type={TypographyType.Callout}>
+                Build your feed
+              </Typography>
+              <Logo
+                position={LogoPosition.Empty}
+                logoClassName={{ container: 'h-5' }}
+                linkDisabled
+              />
+            </div>
+            <div className="mb-2 flex items-center justify-between">
+              <Typography bold type={TypographyType.Callout}>
+                Feed personalization
+              </Typography>
+              <Typography
+                color={TypographyColor.Secondary}
+                type={TypographyType.Footnote}
+              >
+                {progressPercent}%
+              </Typography>
+            </div>
+            <div className="relative h-1 w-full overflow-hidden rounded-50 bg-border-subtlest-tertiary">
+              <div
+                className="transition-width absolute inset-y-0 left-0 rounded-50 bg-accent-cabbage-default duration-300 ease-in-out"
+                style={{ width: `${progress}%` }}
+              />
+            </div>
+            <Typography
+              className="mt-2"
+              color={TypographyColor.Tertiary}
+              type={TypographyType.Footnote}
+            >
+              {swipesCount} swipes
+            </Typography>
+          </div>
+        }
+        bottomSlot={
+          <div className="mt-10 px-4 pb-4">
+            <div className="mb-3 flex items-center gap-3 px-1">
+              <div className="border-accent-bacon-default/40 bg-accent-bacon-default/20 shadow-1 flex h-[4.75rem] flex-1 flex-col items-center justify-center gap-1 rounded-14 border px-2 text-accent-bacon-default">
+                <DownvoteIcon size={IconSize.Large} />
+                <span className="text-center font-bold typo-footnote">
+                  Not interesting
+                </span>
+              </div>
+              <div className="border-accent-cabbage-default/40 bg-accent-cabbage-default/20 shadow-1 flex h-[4.75rem] flex-1 flex-col items-center justify-center gap-1 rounded-14 border px-2 text-accent-cabbage-default">
+                <UpvoteIcon size={IconSize.Large} />
+                <span className="text-center font-bold typo-footnote">
+                  Interesting
+                </span>
+              </div>
+            </div>
+            {canContinue && (
+              <Button
+                className="w-full"
+                size={ButtonSize.Medium}
+                variant={ButtonVariant.Primary}
+                onClick={() => {
+                  onComplete().catch(() => null);
+                }}
+              >
+                Continue to my feed
+              </Button>
+            )}
+          </div>
+        }
+        onRequestClose={() => {
+          onComplete().catch(() => null);
+        }}
+      />
+    </div>
+  );
+}
+
+function Page(): ReactElement {
+  return (
+    <ErrorBoundary feature="onboarding">
+      <SwipeOnboardingPage />
+    </ErrorBoundary>
+  );
+}
+
+Page.layoutProps = { seo };
+
+export default withFeaturesBoundary(Page);

From 9baf48811aa2f970640f8cc0a00e179b423b0b7b Mon Sep 17 00:00:00 2001
From: tomeredlich <tomer.redlich@gmail.com>
Date: Mon, 6 Apr 2026 16:15:25 +0300
Subject: [PATCH 2/3] feat(onboarding): swipe flow progress, tags mode, and
 popular deck

- Add SwipeOnboardingProgressHeader with tiered copy, typing headline, milestone FX fixes\n- Tags mode: shared progress, tag-weighted bar, floating CTA, no feed preview in EditTag\n- Paginated mostUpvoted deck with machine-first + relaxed fallback; recycle deck; onboarding empty/retry\n- HotAndColdModal: 4s intro repeat, loading/empty copy for onboarding vs hot takes\n- Guidance helpers + tests; eligible-post filter tests

Made-with: Cursor
---
 .../modals/hotTakes/HotAndColdModal.tsx       | 1107 ++++++++++++++---
 .../src/components/onboarding/EditTag.tsx     |   39 -
 .../onboarding/steps/FunnelEditTags.tsx       |    8 +-
 .../SwipeOnboardingProgressHeader.tsx         |  392 ++++++
 .../lib/swipeOnboardingEligiblePosts.spec.ts  |   89 ++
 .../lib/swipeOnboardingEligiblePosts.ts       |   40 +
 .../lib/swipeOnboardingGuidance.spec.ts       |  159 +++
 .../webapp/lib/swipeOnboardingGuidance.ts     |  141 +++
 .../webapp/lib/swipeOnboardingPopularDeck.ts  |   77 ++
 packages/webapp/pages/onboarding/swipe.tsx    |  420 +++++--
 10 files changed, 2139 insertions(+), 333 deletions(-)
 create mode 100644 packages/webapp/components/onboarding/SwipeOnboardingProgressHeader.tsx
 create mode 100644 packages/webapp/lib/swipeOnboardingEligiblePosts.spec.ts
 create mode 100644 packages/webapp/lib/swipeOnboardingEligiblePosts.ts
 create mode 100644 packages/webapp/lib/swipeOnboardingGuidance.spec.ts
 create mode 100644 packages/webapp/lib/swipeOnboardingGuidance.ts
 create mode 100644 packages/webapp/lib/swipeOnboardingPopularDeck.ts

diff --git a/packages/shared/src/components/modals/hotTakes/HotAndColdModal.tsx b/packages/shared/src/components/modals/hotTakes/HotAndColdModal.tsx
index 20571d95088..95f70400403 100644
--- a/packages/shared/src/components/modals/hotTakes/HotAndColdModal.tsx
+++ b/packages/shared/src/components/modals/hotTakes/HotAndColdModal.tsx
@@ -18,7 +18,9 @@ import { useAuthContext } from '../../../contexts/AuthContext';
 import { LogEvent, Origin } from '../../../lib/log';
 import { webappUrl } from '../../../lib/constants';
 import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button';
+import { IconSize } from '../../Icon';
 import { HotIcon } from '../../icons/Hot';
+import { MiniCloseIcon, VIcon } from '../../icons';
 import {
   Typography,
   TypographyType,
@@ -28,9 +30,17 @@ import { ProfilePicture, ProfileImageSize } from '../../ProfilePicture';
 import { ReputationUserBadge } from '../../ReputationUserBadge';
 import { VerifiedCompanyUserBadge } from '../../VerifiedCompanyUserBadge';
 import { PlusUserBadge } from '../../PlusUserBadge';
+import { Loader } from '../../Loader';
 import type { HotTake } from '../../../graphql/user/userHotTake';
 
 const SWIPE_THRESHOLD = 80;
+const ONBOARDING_INTRO_INTERESTING_OFFSET = 56;
+const ONBOARDING_INTRO_NOT_OFFSET = -56;
+const ONBOARDING_INTRO_PHASE_MS = 160;
+const ONBOARDING_INTRO_PAUSE_MS = 55;
+const ONBOARDING_INTRO_START_DELAY_MS = 120;
+/** Time from the start of one intro play to the start of the next (~4s; hint loop until user interacts). */
+const ONBOARDING_INTRO_REPEAT_INTERVAL_MS = 4000;
 const DISMISS_ANIMATION_MS = 340;
 const BUTTON_DISMISS_ANIMATION_MS = 620;
 const DISMISS_FLY_DISTANCE = 760;
@@ -41,7 +51,497 @@ const SKIP_DISMISS_FLY_DISTANCE = 600;
 const SKIP_DRAG_ELASTICITY_FACTOR = 0.3;
 const COLD_ACCENT_COLOR = '#123a88';
 const HOT_TAKE_CARD_HEIGHT = '28rem';
-const ONBOARDING_CARD_HEIGHT = '24rem';
+/** Title3 × 3 lines (typo-title3 line-height 1.625rem in tailwind/typography.ts). */
+const ONBOARDING_CARD_TITLE_MIN_HEIGHT = '4.875rem';
+/** Fixed onboarding post card (source + 3-line title + 4:3 image + padding). */
+const ONBOARDING_POST_CARD_HEIGHT = '24rem';
+/** Swipe stack area: card height plus back-card vertical offset (8px). */
+const ONBOARDING_SWIPE_AREA_HEIGHT = '24.5rem';
+
+const smoothstep01 = (t: number): number => {
+  const x = Math.min(Math.max(t, 0), 1);
+  return x * x * (3 - 2 * x);
+};
+
+const pauseMs = (ms: number): Promise<void> =>
+  new Promise((resolve) => {
+    window.setTimeout(() => {
+      resolve();
+    }, ms);
+  });
+
+const runOnboardingIntroAnimation = ({
+  signal,
+  onUpdate,
+}: {
+  signal: { aborted: boolean };
+  onUpdate: (value: number) => void;
+}): Promise<void> => {
+  const segment = (from: number, to: number, durationMs: number) =>
+    new Promise<void>((resolve) => {
+      const startTime = performance.now();
+      const tick = (now: number) => {
+        if (signal.aborted) {
+          resolve();
+          return;
+        }
+        const elapsed = now - startTime;
+        const t = durationMs <= 0 ? 1 : Math.min(elapsed / durationMs, 1);
+        const eased = smoothstep01(t);
+        onUpdate(from + (to - from) * eased);
+        if (t < 1) {
+          requestAnimationFrame(tick);
+        } else {
+          resolve();
+        }
+      };
+      requestAnimationFrame(tick);
+    });
+
+  return (async () => {
+    await segment(
+      0,
+      ONBOARDING_INTRO_INTERESTING_OFFSET,
+      ONBOARDING_INTRO_PHASE_MS,
+    );
+    if (signal.aborted) {
+      return;
+    }
+    await pauseMs(ONBOARDING_INTRO_PAUSE_MS);
+    if (signal.aborted) {
+      return;
+    }
+    await segment(
+      ONBOARDING_INTRO_INTERESTING_OFFSET,
+      ONBOARDING_INTRO_NOT_OFFSET,
+      ONBOARDING_INTRO_PHASE_MS,
+    );
+    if (signal.aborted) {
+      return;
+    }
+    await pauseMs(ONBOARDING_INTRO_PAUSE_MS);
+    if (signal.aborted) {
+      return;
+    }
+    await segment(ONBOARDING_INTRO_NOT_OFFSET, 0, ONBOARDING_INTRO_PHASE_MS);
+  })();
+};
+
+const ONBOARDING_BEHIND_PARTICLES_CSS = `
+  @keyframes onboardingBehindParticle {
+    0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0; }
+    10% { opacity: 0.9; }
+    35% { transform: translate3d(var(--obp-tx), var(--obp-ty), 0) scale(1.08); opacity: 0.65; }
+    65% { transform: translate3d(calc(var(--obp-ex) * 0.55), 3.5rem, 0) scale(0.65); opacity: 0.3; }
+    100% { transform: translate3d(var(--obp-ex), 8rem, 0) scale(0.15); opacity: 0; }
+  }
+  @keyframes onboardingMagicSpark {
+    0%, 100% { transform: translate3d(0, 0, 0) scale(0.75); opacity: 0.45; filter: blur(0); }
+    20% { transform: translate3d(var(--oms-x1), var(--oms-y1), 0) scale(1.35); opacity: 1; filter: blur(0); }
+    45% { transform: translate3d(var(--oms-x2), var(--oms-y2), 0) scale(1); opacity: 0.65; filter: blur(0); }
+    70% { transform: translate3d(var(--oms-x3), var(--oms-y3), 0) scale(1.2); opacity: 0.9; filter: blur(0); }
+  }
+  @keyframes onboardingAuraDrift {
+    0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.35; }
+    33% { transform: translate3d(0.35rem, -0.5rem, 0) scale(1.06); opacity: 0.55; }
+    66% { transform: translate3d(-0.25rem, 0.35rem, 0) scale(0.96); opacity: 0.42; }
+  }
+`;
+
+const ONBOARDING_BEHIND_PARTICLE_SPECS: ReadonlyArray<{
+  left: string;
+  top: string;
+  size: string;
+  tx: string;
+  ty: string;
+  ex: string;
+  duration: number;
+  delay: number;
+  className: string;
+}> = [
+  {
+    left: '6%',
+    top: '72%',
+    size: '0.25rem',
+    tx: '1.5rem',
+    ty: '-2.25rem',
+    ex: '0.5rem',
+    duration: 4.6,
+    delay: 0,
+    className: 'bg-accent-avocado-default/40',
+  },
+  {
+    left: '92%',
+    top: '68%',
+    size: '0.1875rem',
+    tx: '-1.25rem',
+    ty: '-2rem',
+    ex: '-0.75rem',
+    duration: 4.1,
+    delay: 0.35,
+    className: 'bg-accent-bacon-default/35',
+  },
+  {
+    left: '18%',
+    top: '88%',
+    size: '0.3125rem',
+    tx: '0.75rem',
+    ty: '-1.25rem',
+    ex: '1rem',
+    duration: 3.7,
+    delay: 0.7,
+    className: 'bg-text-tertiary/50',
+  },
+  {
+    left: '78%',
+    top: '82%',
+    size: '0.25rem',
+    tx: '-0.5rem',
+    ty: '-1.75rem',
+    ex: '-1.25rem',
+    duration: 4.3,
+    delay: 0.2,
+    className: 'bg-accent-avocado-default/30',
+  },
+  {
+    left: '44%',
+    top: '92%',
+    size: '0.1875rem',
+    tx: '1rem',
+    ty: '-0.75rem',
+    ex: '0.25rem',
+    duration: 3.4,
+    delay: 1.1,
+    className: 'bg-text-tertiary/40',
+  },
+  {
+    left: '52%',
+    top: '78%',
+    size: '0.25rem',
+    tx: '-1.5rem',
+    ty: '-2.5rem',
+    ex: '-0.25rem',
+    duration: 4.8,
+    delay: 0.55,
+    className: 'bg-accent-bacon-default/25',
+  },
+  {
+    left: '28%',
+    top: '58%',
+    size: '0.1875rem',
+    tx: '2rem',
+    ty: '0.25rem',
+    ex: '0.75rem',
+    duration: 5.1,
+    delay: 0.9,
+    className: 'bg-accent-avocado-default/25',
+  },
+  {
+    left: '66%',
+    top: '52%',
+    size: '0.25rem',
+    tx: '-1.75rem',
+    ty: '0.5rem',
+    ex: '-1rem',
+    duration: 4.4,
+    delay: 1.4,
+    className: 'bg-text-tertiary/35',
+  },
+];
+
+const ONBOARDING_MAGIC_SPARK_SPECS: ReadonlyArray<{
+  left: string;
+  top: string;
+  size: string;
+  x1: string;
+  y1: string;
+  x2: string;
+  y2: string;
+  x3: string;
+  y3: string;
+  duration: number;
+  delay: number;
+  className: string;
+}> = [
+  {
+    left: '12%',
+    top: '38%',
+    size: '0.1875rem',
+    x1: '0.4rem',
+    y1: '-1.25rem',
+    x2: '-0.35rem',
+    y2: '-2rem',
+    x3: '0.5rem',
+    y3: '-1rem',
+    duration: 2.8,
+    delay: 0,
+    className: 'bg-accent-avocado-default/90',
+  },
+  {
+    left: '84%',
+    top: '42%',
+    size: '0.15625rem',
+    x1: '-0.45rem',
+    y1: '-1rem',
+    x2: '0.3rem',
+    y2: '-1.75rem',
+    x3: '-0.2rem',
+    y3: '-0.5rem',
+    duration: 3.2,
+    delay: 0.4,
+    className: 'bg-accent-bacon-default/85',
+  },
+  {
+    left: '48%',
+    top: '28%',
+    size: '0.125rem',
+    x1: '0.25rem',
+    y1: '-0.75rem',
+    x2: '0.5rem',
+    y2: '-1.5rem',
+    x3: '0.1rem',
+    y3: '-1.1rem',
+    duration: 2.4,
+    delay: 0.8,
+    className: 'bg-accent-cabbage-default/80',
+  },
+  {
+    left: '22%',
+    top: '48%',
+    size: '0.15625rem',
+    x1: '0.6rem',
+    y1: '0.25rem',
+    x2: '0.2rem',
+    y2: '-0.5rem',
+    x3: '0.75rem',
+    y3: '-0.25rem',
+    duration: 3.6,
+    delay: 0.15,
+    className: 'bg-accent-avocado-default/70',
+  },
+  {
+    left: '72%',
+    top: '36%',
+    size: '0.1875rem',
+    x1: '-0.5rem',
+    y1: '-0.5rem',
+    x2: '-0.75rem',
+    y2: '-1.25rem',
+    x3: '-0.35rem',
+    y3: '-1.75rem',
+    duration: 2.9,
+    delay: 1.1,
+    className: 'bg-accent-bacon-default/75',
+  },
+  {
+    left: '56%',
+    top: '44%',
+    size: '0.125rem',
+    x1: '-0.2rem',
+    y1: '-1.5rem',
+    x2: '0.4rem',
+    y2: '-2.25rem',
+    x3: '0.15rem',
+    y3: '-1.75rem',
+    duration: 3.4,
+    delay: 0.55,
+    className: 'bg-text-tertiary/80',
+  },
+  {
+    left: '36%',
+    top: '32%',
+    size: '0.15625rem',
+    x1: '0.35rem',
+    y1: '-0.35rem',
+    x2: '-0.15rem',
+    y2: '-1rem',
+    x3: '0.45rem',
+    y3: '-1.4rem',
+    duration: 2.6,
+    delay: 1.3,
+    className: 'bg-accent-avocado-default/80',
+  },
+  {
+    left: '64%',
+    top: '50%',
+    size: '0.125rem',
+    x1: '-0.3rem',
+    y1: '-1.1rem',
+    x2: '0.25rem',
+    y2: '-1.8rem',
+    x3: '-0.5rem',
+    y3: '-1.2rem',
+    duration: 3,
+    delay: 0.25,
+    className: 'bg-accent-cheese-default/75',
+  },
+];
+
+const OnboardingCardBehindParticles = (): ReactElement => (
+  <>
+    {/* eslint-disable-next-line react/no-unknown-property -- style tag for scoped keyframes */}
+    <style>{ONBOARDING_BEHIND_PARTICLES_CSS}</style>
+    <div
+      aria-hidden
+      className="opacity-70 pointer-events-none absolute inset-0 z-[21] overflow-hidden rounded-16"
+    >
+      <div
+        className="bg-accent-avocado-default/50 absolute left-[5%] top-[8%] h-[42%] w-[55%] rounded-full blur-2xl"
+        style={{
+          animation: 'onboardingAuraDrift 5.5s ease-in-out infinite',
+        }}
+      />
+      <div
+        className="bg-accent-bacon-default/45 absolute bottom-[6%] right-[4%] h-[38%] w-[52%] rounded-full blur-2xl"
+        style={{
+          animation: 'onboardingAuraDrift 6.2s ease-in-out infinite',
+          animationDelay: '1.1s',
+        }}
+      />
+      <div
+        className="bg-accent-cabbage-default/40 absolute left-[22%] top-[38%] h-[35%] w-[48%] rounded-full blur-2xl"
+        style={{
+          animation: 'onboardingAuraDrift 4.8s ease-in-out infinite',
+          animationDelay: '0.6s',
+        }}
+      />
+      {ONBOARDING_MAGIC_SPARK_SPECS.map((spark) => (
+        <span
+          key={`spark-${spark.left}-${spark.top}-${spark.delay}`}
+          className={classNames('absolute rounded-full', spark.className)}
+          style={
+            {
+              left: spark.left,
+              top: spark.top,
+              width: spark.size,
+              height: spark.size,
+              '--oms-x1': spark.x1,
+              '--oms-y1': spark.y1,
+              '--oms-x2': spark.x2,
+              '--oms-y2': spark.y2,
+              '--oms-x3': spark.x3,
+              '--oms-y3': spark.y3,
+              animation: `onboardingMagicSpark ${spark.duration}s ease-in-out infinite`,
+              animationDelay: `${spark.delay}s`,
+            } as React.CSSProperties
+          }
+        />
+      ))}
+      {ONBOARDING_BEHIND_PARTICLE_SPECS.map((particle) => (
+        <span
+          key={`${particle.left}-${particle.top}-${particle.delay}-${particle.duration}`}
+          className={classNames(
+            'absolute rounded-full blur-[0.0625rem]',
+            particle.className,
+          )}
+          style={
+            {
+              left: particle.left,
+              top: particle.top,
+              width: particle.size,
+              height: particle.size,
+              '--obp-tx': particle.tx,
+              '--obp-ty': particle.ty,
+              '--obp-ex': particle.ex,
+              animation: `onboardingBehindParticle ${particle.duration}s ease-in-out infinite`,
+              animationDelay: `${particle.delay}s`,
+            } as React.CSSProperties
+          }
+        />
+      ))}
+    </div>
+  </>
+);
+
+const OnboardingSwipeHintIcons = ({
+  deltaX,
+  disabled,
+  onNotInteresting,
+  onInteresting,
+}: {
+  deltaX: number;
+  disabled: boolean;
+  onNotInteresting: () => void;
+  onInteresting: () => void;
+}): ReactElement => {
+  const swipeVisualIntensity = Math.min(Math.abs(deltaX) / SWIPE_THRESHOLD, 1);
+  const leftVisualStrength = deltaX < 0 ? swipeVisualIntensity : 0;
+  const rightVisualStrength = deltaX > 0 ? swipeVisualIntensity : 0;
+
+  const leftAccentColor = 'var(--theme-accent-bacon-default)';
+  const rightAccentColor = 'var(--theme-accent-avocado-default)';
+  const leftSwipeEmphasized = leftVisualStrength > 0;
+  const rightSwipeEmphasized = rightVisualStrength > 0;
+
+  return (
+    <div className="flex items-center justify-center gap-5 px-1">
+      <button
+        type="button"
+        aria-label="Not interesting"
+        disabled={disabled}
+        className={classNames(
+          'shadow-1 flex size-12 cursor-pointer items-center justify-center rounded-full border transition-all duration-150 ease-out',
+          'disabled:cursor-not-allowed disabled:opacity-40',
+          leftSwipeEmphasized
+            ? 'opacity-100'
+            : 'border-border-subtlest-tertiary text-text-tertiary opacity-40 enabled:hover:border-accent-bacon-default enabled:hover:text-accent-bacon-default enabled:hover:opacity-100 enabled:focus-visible:border-accent-bacon-default enabled:focus-visible:text-accent-bacon-default enabled:focus-visible:opacity-100 enabled:active:border-accent-bacon-default enabled:active:text-accent-bacon-default enabled:active:opacity-100',
+        )}
+        style={{
+          transform: `scale(${1 + leftVisualStrength * 0.1})`,
+          ...(leftSwipeEmphasized
+            ? {
+                color: leftAccentColor,
+                borderColor: leftAccentColor,
+                backgroundColor: `color-mix(in srgb, ${leftAccentColor} ${Math.round(
+                  leftVisualStrength * 16,
+                )}%, transparent)`,
+                boxShadow: `0 0 ${
+                  8 + leftVisualStrength * 10
+                }px color-mix(in srgb, ${leftAccentColor} ${Math.round(
+                  leftVisualStrength * 45,
+                )}%, transparent)`,
+              }
+            : {}),
+        }}
+        onClick={onNotInteresting}
+      >
+        <MiniCloseIcon size={IconSize.Medium} />
+      </button>
+      <button
+        type="button"
+        aria-label="Interesting"
+        disabled={disabled}
+        className={classNames(
+          'shadow-1 flex size-12 cursor-pointer items-center justify-center rounded-full border transition-all duration-150 ease-out',
+          'disabled:cursor-not-allowed disabled:opacity-40',
+          rightSwipeEmphasized
+            ? 'opacity-100'
+            : 'border-border-subtlest-tertiary text-text-tertiary opacity-40 enabled:hover:border-accent-avocado-default enabled:hover:text-accent-avocado-default enabled:hover:opacity-100 enabled:focus-visible:border-accent-avocado-default enabled:focus-visible:text-accent-avocado-default enabled:focus-visible:opacity-100 enabled:active:border-accent-avocado-default enabled:active:text-accent-avocado-default enabled:active:opacity-100',
+        )}
+        style={{
+          transform: `scale(${1 + rightVisualStrength * 0.1})`,
+          ...(rightSwipeEmphasized
+            ? {
+                color: rightAccentColor,
+                borderColor: rightAccentColor,
+                backgroundColor: `color-mix(in srgb, ${rightAccentColor} ${Math.round(
+                  rightVisualStrength * 16,
+                )}%, transparent)`,
+                boxShadow: `0 0 ${
+                  8 + rightVisualStrength * 10
+                }px color-mix(in srgb, ${rightAccentColor} ${Math.round(
+                  rightVisualStrength * 45,
+                )}%, transparent)`,
+              }
+            : {}),
+        }}
+        onClick={onInteresting}
+      >
+        <VIcon size={IconSize.Medium} />
+      </button>
+    </div>
+  );
+};
 
 const getElasticDelta = (delta: number): number => {
   const absoluteDelta = Math.abs(delta);
@@ -810,6 +1310,7 @@ const OnboardingPostCard = ({
   isDismissAnimating,
   isDragging,
   dismissDurationMs,
+  useInstantSwipeTransform = false,
 }: {
   card: OnboardingSwipeCard;
   isTop: boolean;
@@ -819,6 +1320,7 @@ const OnboardingPostCard = ({
   isDismissAnimating: boolean;
   isDragging: boolean;
   dismissDurationMs: number;
+  useInstantSwipeTransform?: boolean;
 }): ReactElement => {
   const isSkipAnimating = isTop && isDismissAnimating && skipDeltaY !== 0;
   let swipeDirection: 'left' | 'right' | null = null;
@@ -852,7 +1354,7 @@ const OnboardingPostCard = ({
   if (isTop) {
     if (isDismissAnimating) {
       transition = `transform ${dismissDurationMs}ms cubic-bezier(0.16, 0.86, 0.22, 1), opacity ${dismissDurationMs}ms ease-out, filter ${dismissDurationMs}ms ease-out`;
-    } else if (isDragging) {
+    } else if (isDragging || useInstantSwipeTransform) {
       transition = 'none';
     } else {
       transition = 'transform 0.28s cubic-bezier(0.22, 1, 0.36, 1)';
@@ -862,15 +1364,15 @@ const OnboardingPostCard = ({
   return (
     <div
       className={classNames(
-        'absolute inset-0 flex select-none flex-col overflow-hidden rounded-16',
+        'flex min-h-0 w-full select-none flex-col overflow-hidden rounded-16',
         isTop
-          ? 'border border-border-subtlest-tertiary bg-background-popover'
-          : 'bg-background-default',
+          ? 'relative border border-border-subtlest-tertiary bg-background-popover'
+          : 'pointer-events-none absolute left-0 right-0 top-0 bg-background-default',
         isTop && 'cursor-grab active:cursor-grabbing',
-        !isTop && 'pointer-events-none',
       )}
       onDragStart={(event) => event.preventDefault()}
       style={{
+        height: ONBOARDING_POST_CARD_HEIGHT,
         transform: `translateX(${translateX}px) translateY(${translateYWithOutro}px) rotate(${rotation}deg) scale(${scale})`,
         zIndex: 10 - offset,
         transition,
@@ -889,26 +1391,16 @@ const OnboardingPostCard = ({
           className={classNames(
             'z-20 absolute left-1/2 top-3 -translate-x-1/2 rounded-10 px-3 py-1 font-bold text-white typo-callout',
             swipeDirection === 'right'
-              ? 'bg-accent-cabbage-default'
+              ? 'bg-accent-avocado-default'
               : 'bg-accent-bacon-default',
           )}
           style={{ opacity: swipeIntensity }}
         >
-          {swipeDirection === 'right' ? 'INTERESTING' : 'NOT INTERESTING'}
+          {swipeDirection === 'right' ? 'INTERESTING' : 'NOT'}
         </div>
       )}
-      {card.image ? (
-        <img
-          alt={card.title ?? 'Popular post'}
-          className="h-[14rem] w-full object-cover"
-          draggable={false}
-          src={card.image}
-        />
-      ) : (
-        <div className="h-[14rem] w-full bg-surface-hover" />
-      )}
-      <div className="flex flex-1 flex-col gap-3 p-4">
-        <div className="flex items-center gap-2">
+      <div className="flex min-h-0 flex-1 flex-col gap-4 p-4">
+        <div className="flex shrink-0 items-center gap-2">
           {card.source?.image ? (
             <img
               alt={card.source.name ?? 'Source'}
@@ -928,19 +1420,76 @@ const OnboardingPostCard = ({
             {card.source?.name || 'daily.dev'}
           </Typography>
         </div>
-        <Typography
-          type={TypographyType.Title3}
-          color={TypographyColor.Primary}
-          className="line-clamp-4 text-balance"
-          bold
+        <div
+          className="shrink-0"
+          style={{ minHeight: ONBOARDING_CARD_TITLE_MIN_HEIGHT }}
         >
-          {card.title || 'Popular developer story'}
-        </Typography>
+          <Typography
+            type={TypographyType.Title3}
+            color={TypographyColor.Primary}
+            className="line-clamp-3 text-balance"
+            bold
+          >
+            {card.title || 'Popular developer story'}
+          </Typography>
+        </div>
+        <div className="aspect-[4/3] w-full shrink-0 overflow-hidden rounded-12">
+          {card.image ? (
+            <img
+              alt={card.title ?? 'Popular post'}
+              className="size-full rounded-12 object-cover"
+              draggable={false}
+              src={card.image}
+            />
+          ) : (
+            <div className="size-full rounded-12 bg-surface-hover" />
+          )}
+        </div>
       </div>
     </div>
   );
 };
 
+const OnboardingFeedEmptyState = ({
+  onRetry,
+  isRefetching,
+}: {
+  onRetry?: () => void;
+  isRefetching: boolean;
+}): ReactElement => (
+  <div className="flex flex-1 flex-col items-center justify-center gap-4 p-6">
+    {isRefetching ? (
+      <Loader />
+    ) : null}
+    <Typography
+      type={TypographyType.Title3}
+      color={TypographyColor.Primary}
+      bold
+      className="text-center"
+    >
+      Couldn&apos;t load stories
+    </Typography>
+    <Typography
+      type={TypographyType.Body}
+      color={TypographyColor.Tertiary}
+      className="text-center"
+    >
+      Check your connection and try again.
+    </Typography>
+    {onRetry ? (
+      <Button
+        variant={ButtonVariant.Primary}
+        size={ButtonSize.Medium}
+        type="button"
+        disabled={isRefetching}
+        onClick={onRetry}
+      >
+        Try again
+      </Button>
+    ) : null}
+  </div>
+);
+
 const EmptyState = ({
   onClose,
   username,
@@ -983,10 +1532,15 @@ const EmptyState = ({
 
 type SwipeActionDirection = 'left' | 'right' | 'skip';
 
+export type OnboardingSwipeActionMeta = {
+  onboardingCardId?: string;
+};
+
 export interface OnboardingSwipeCard {
   id: string;
   title?: string;
   image?: string | null;
+  tags?: string[];
   source?: {
     name?: string | null;
     image?: string | null;
@@ -1001,9 +1555,19 @@ interface HotAndColdModalProps extends ModalProps {
   showHeader?: boolean;
   showDefaultActions?: boolean;
   showAddHotTakeButton?: boolean;
-  onSwipeAction?: (direction: SwipeActionDirection) => void;
+  onSwipeAction?: (
+    direction: SwipeActionDirection,
+    meta?: OnboardingSwipeActionMeta,
+  ) => void;
   onboardingCards?: OnboardingSwipeCard[];
   onboardingCardsLoading?: boolean;
+  /** When set, dismissed onboarding cards are controlled by the parent (e.g. persist across view switches). */
+  dismissedOnboardingCardIds?: Set<string>;
+  onDismissedOnboardingCardsChange?: (next: Set<string>) => void;
+  /** Refetch popular posts when the onboarding deck failed to load. */
+  onOnboardingFeedRetry?: () => void;
+  /** True while onboarding deck query is fetching (initial or retry). */
+  onboardingFeedRefetching?: boolean;
 }
 
 const HotAndColdModal = ({
@@ -1018,6 +1582,11 @@ const HotAndColdModal = ({
   onSwipeAction,
   onboardingCards,
   onboardingCardsLoading = false,
+  dismissedOnboardingCardIds,
+  onDismissedOnboardingCardsChange,
+  onOnboardingFeedRetry,
+  onboardingFeedRefetching = false,
+  className,
   ...props
 }: HotAndColdModalProps): ReactElement => {
   const { currentTake, nextTake, isEmpty, isLoading, dismissCurrent } =
@@ -1037,9 +1606,35 @@ const HotAndColdModal = ({
   const dismissTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const [skipDelta, setSkipDelta] = useState(0);
   const swipeDeltaYRef = useRef(0);
-  const [dismissedCardIds, setDismissedCardIds] = useState<Set<string>>(
-    () => new Set<string>(),
+  const [internalDismissedCardIds, setInternalDismissedCardIds] = useState<
+    Set<string>
+  >(() => new Set<string>());
+  const dismissedCardIds =
+    dismissedOnboardingCardIds ?? internalDismissedCardIds;
+  const updateDismissedCardIds = useCallback(
+    (updater: (prev: Set<string>) => Set<string>) => {
+      if (onDismissedOnboardingCardsChange) {
+        const base = dismissedOnboardingCardIds ?? new Set<string>();
+        onDismissedOnboardingCardsChange(updater(base));
+        return;
+      }
+      setInternalDismissedCardIds(updater);
+    },
+    [dismissedOnboardingCardIds, onDismissedOnboardingCardsChange],
   );
+  const onboardingIntroRepeatCancelledRef = useRef(false);
+  const onboardingIntroAbortRef = useRef<{ aborted: boolean } | null>(null);
+  const [onboardingIntroDelta, setOnboardingIntroDelta] = useState(0);
+
+  const abortOnboardingIntro = useCallback(() => {
+    onboardingIntroRepeatCancelledRef.current = true;
+    const { current } = onboardingIntroAbortRef;
+    if (current) {
+      current.aborted = true;
+      onboardingIntroAbortRef.current = null;
+    }
+    setOnboardingIntroDelta(0);
+  }, []);
 
   const isOnboardingMode = !!onboardingCards;
   const availableOnboardingCards = useMemo(
@@ -1053,8 +1648,8 @@ const HotAndColdModal = ({
   const isModalEmpty = isOnboardingMode
     ? !isModalLoading && !currentOnboardingCard
     : isEmpty;
-  const cardHeight = isOnboardingMode
-    ? ONBOARDING_CARD_HEIGHT
+  const swipeAreaHeight = isOnboardingMode
+    ? ONBOARDING_SWIPE_AREA_HEIGHT
     : HOT_TAKE_CARD_HEIGHT;
 
   useEffect(() => {
@@ -1082,6 +1677,84 @@ const HotAndColdModal = ({
     };
   }, []);
 
+  useEffect(() => {
+    if (
+      !isOnboardingMode ||
+      isModalLoading ||
+      !currentOnboardingCard ||
+      onboardingIntroRepeatCancelledRef.current
+    ) {
+      return undefined;
+    }
+
+    let effectCancelled = false;
+    let nextIterationTimeoutId: number | null = null;
+
+    const runOneIntroIteration = (): void => {
+      if (effectCancelled || onboardingIntroRepeatCancelledRef.current) {
+        setOnboardingIntroDelta(0);
+        return;
+      }
+      const animSignal = { aborted: false };
+      onboardingIntroAbortRef.current = animSignal;
+      const iterationStart = performance.now();
+      runOnboardingIntroAnimation({
+        signal: animSignal,
+        onUpdate: (value) => {
+          if (
+            !animSignal.aborted &&
+            !onboardingIntroRepeatCancelledRef.current
+          ) {
+            setOnboardingIntroDelta(value);
+          }
+        },
+      })
+        .then(() => {
+          if (onboardingIntroAbortRef.current === animSignal) {
+            onboardingIntroAbortRef.current = null;
+          }
+          if (
+            animSignal.aborted ||
+            effectCancelled ||
+            onboardingIntroRepeatCancelledRef.current
+          ) {
+            setOnboardingIntroDelta(0);
+            return;
+          }
+          setOnboardingIntroDelta(0);
+          const elapsed = performance.now() - iterationStart;
+          const waitMs = Math.max(
+            0,
+            ONBOARDING_INTRO_REPEAT_INTERVAL_MS - elapsed,
+          );
+          nextIterationTimeoutId = window.setTimeout(
+            runOneIntroIteration,
+            waitMs,
+          );
+        })
+        .catch(() => null);
+    };
+
+    nextIterationTimeoutId = window.setTimeout(() => {
+      nextIterationTimeoutId = null;
+      runOneIntroIteration();
+    }, ONBOARDING_INTRO_START_DELAY_MS);
+
+    return () => {
+      effectCancelled = true;
+      if (nextIterationTimeoutId !== null) {
+        window.clearTimeout(nextIterationTimeoutId);
+      }
+      const { current } = onboardingIntroAbortRef;
+      if (current) {
+        current.aborted = true;
+        onboardingIntroAbortRef.current = null;
+      }
+      setOnboardingIntroDelta(0);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- depend on card id only, not currentOnboardingCard reference
+  }, [isOnboardingMode, isModalLoading, currentOnboardingCard?.id]);
+
   const startDismissAnimation = useCallback(
     ({
       takeId,
@@ -1128,9 +1801,13 @@ const HotAndColdModal = ({
         animatingTakeIdRef.current = null;
         setAnimatingTakeId(null);
         if (isOnboardingMode && currentOnboardingCard) {
-          setDismissedCardIds((prev) => {
+          updateDismissedCardIds((prev) => {
             const next = new Set(prev);
             next.add(currentOnboardingCard.id);
+            const deck = onboardingCards ?? [];
+            if (deck.length > 0 && deck.every((c) => next.has(c.id))) {
+              return new Set<string>();
+            }
             return next;
           });
         } else {
@@ -1140,7 +1817,13 @@ const HotAndColdModal = ({
         dismissTimerRef.current = null;
       }, durationMs);
     },
-    [currentOnboardingCard, dismissCurrent, isOnboardingMode],
+    [
+      currentOnboardingCard,
+      dismissCurrent,
+      isOnboardingMode,
+      onboardingCards,
+      updateDismissedCardIds,
+    ],
   );
 
   const handleDismiss = useCallback(
@@ -1153,6 +1836,8 @@ const HotAndColdModal = ({
         return;
       }
 
+      abortOnboardingIntro();
+
       const isButtonSource = source === 'button';
       const durationMs = isButtonSource
         ? BUTTON_DISMISS_ANIMATION_MS
@@ -1178,7 +1863,10 @@ const HotAndColdModal = ({
           });
         }
       }
-      onSwipeAction?.(direction);
+      onSwipeAction?.(
+        direction,
+        isOnboardingMode ? { onboardingCardId: currentItemId } : undefined,
+      );
 
       let initialPush: number;
       let flyDistance: number;
@@ -1219,6 +1907,7 @@ const HotAndColdModal = ({
       logEvent,
       onSwipeAction,
       swipeDelta,
+      abortOnboardingIntro,
     ],
   );
 
@@ -1232,6 +1921,8 @@ const HotAndColdModal = ({
         return;
       }
 
+      abortOnboardingIntro();
+
       logEvent({
         event_name: LogEvent.SkipHotTake,
         target_id: currentItemId,
@@ -1258,6 +1949,7 @@ const HotAndColdModal = ({
       startDismissAnimation,
       logEvent,
       onSwipeAction,
+      abortOnboardingIntro,
     ],
   );
 
@@ -1269,6 +1961,15 @@ const HotAndColdModal = ({
   const cardSwipeDelta =
     isAnimating && !isCurrentTakeAnimating ? 0 : swipeDelta;
   const cardSkipDelta = isAnimating && !isCurrentTakeAnimating ? 0 : skipDelta;
+  const combinedOnboardingSwipeX =
+    isOnboardingMode && !isDragging && !isCurrentTakeAnimating
+      ? cardSwipeDelta + onboardingIntroDelta
+      : cardSwipeDelta;
+  const onboardingIntroPlaying =
+    isOnboardingMode &&
+    !isDragging &&
+    !isCurrentTakeAnimating &&
+    onboardingIntroDelta !== 0;
 
   const handleSwiped = (direction: 'left' | 'right') => {
     setIsDragging(false);
@@ -1285,9 +1986,14 @@ const HotAndColdModal = ({
   const handlers = useSwipeable({
     onSwiping: (e) => {
       if (!isAnimating) {
+        abortOnboardingIntro();
         setIsDragging(true);
         setSwipeDelta(e.deltaX);
-        if (e.deltaY < 0 && Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
+        if (
+          !isOnboardingMode &&
+          e.deltaY < 0 &&
+          Math.abs(e.deltaY) > Math.abs(e.deltaX)
+        ) {
           setSkipDelta(getElasticDelta(e.deltaY));
         } else {
           setSkipDelta(0);
@@ -1300,6 +2006,13 @@ const HotAndColdModal = ({
     onSwipedRight: () => handleSwiped('right'),
     onSwipedUp: () => {
       setIsDragging(false);
+      if (isOnboardingMode) {
+        setSwipeDelta(0);
+        swipeDeltaRef.current = 0;
+        setSkipDelta(0);
+        swipeDeltaYRef.current = 0;
+        return;
+      }
       if (
         swipeDeltaYRef.current < 0 &&
         Math.abs(swipeDeltaYRef.current) > SWIPE_THRESHOLD
@@ -1319,159 +2032,215 @@ const HotAndColdModal = ({
     touchEventOptions: { passive: false },
   });
 
+  const cardSwipeArea = (
+    <div
+      {...handlers}
+      className={classNames(
+        'relative mx-4 select-none self-center',
+        isOnboardingMode ? 'touch-pan-x' : 'touch-none',
+        isOnboardingMode
+          ? 'mt-2 w-[calc(100%-3rem)] max-w-[20rem]'
+          : 'mt-4 w-[calc(100%-2rem)]',
+      )}
+      style={
+        swipeAreaHeight !== undefined ? { height: swipeAreaHeight } : undefined
+      }
+    >
+      {isOnboardingMode ? (
+        <>
+          {nextOnboardingCard && (
+            <OnboardingPostCard
+              key={nextOnboardingCard.id}
+              card={nextOnboardingCard}
+              isTop={false}
+              offset={1}
+              swipeDelta={0}
+              isDismissAnimating={false}
+              isDragging={false}
+              dismissDurationMs={DISMISS_ANIMATION_MS}
+            />
+          )}
+          {currentOnboardingCard && (
+            <OnboardingPostCard
+              key={currentOnboardingCard.id}
+              card={currentOnboardingCard}
+              isTop
+              offset={0}
+              swipeDelta={combinedOnboardingSwipeX}
+              skipDeltaY={0}
+              isDismissAnimating={isCurrentTakeAnimating}
+              isDragging={isDragging}
+              dismissDurationMs={dismissDurationMs}
+              useInstantSwipeTransform={onboardingIntroPlaying}
+            />
+          )}
+          <OnboardingCardBehindParticles />
+        </>
+      ) : (
+        <>
+          {nextTake && (
+            <HotTakeCard
+              key={nextTake.id}
+              hotTake={nextTake}
+              isTop={false}
+              offset={1}
+              swipeDelta={0}
+              isDismissAnimating={false}
+              isDragging={false}
+              dismissDurationMs={DISMISS_ANIMATION_MS}
+            />
+          )}
+          {currentTake && (
+            <HotTakeCard
+              key={currentTake.id}
+              hotTake={currentTake}
+              isTop
+              offset={0}
+              swipeDelta={cardSwipeDelta}
+              skipDeltaY={cardSkipDelta}
+              isDismissAnimating={isCurrentTakeAnimating}
+              isDragging={isDragging}
+              dismissDurationMs={dismissDurationMs}
+            />
+          )}
+        </>
+      )}
+    </div>
+  );
+
   return (
-    <Modal {...props} onRequestClose={onRequestClose} size={ModalSize.Small}>
+    <Modal
+      {...props}
+      className={classNames(
+        isOnboardingMode && 'tablet:!max-h-[calc(100vh-2rem)]',
+        className,
+      )}
+      onRequestClose={onRequestClose}
+      size={ModalSize.Small}
+    >
       {showHeader && <Modal.Header title={title} />}
-      <Modal.Body className="overflow-hidden !p-0">
+      <Modal.Body
+        className={classNames(
+          'bg-overlay-quaternary-onion !p-0',
+          isOnboardingMode
+            ? 'min-h-0 flex-1 overflow-y-auto overflow-x-hidden tablet:flex-none tablet:!overflow-x-visible tablet:!overflow-y-visible'
+            : 'min-h-0 flex-1 overflow-y-auto overflow-x-hidden',
+        )}
+      >
         {headerSlot}
         {isModalLoading && (
-          <div className="flex flex-1 items-center justify-center p-6">
+          <div className="flex flex-1 flex-col items-center justify-center gap-3 p-6">
+            {isOnboardingMode ? <Loader /> : null}
             <Typography
               type={TypographyType.Body}
               color={TypographyColor.Tertiary}
             >
-              Loading hot takes...
+              {isOnboardingMode ? 'Loading stories…' : 'Loading hot takes...'}
             </Typography>
           </div>
         )}
 
-        {!isModalLoading && isModalEmpty && (
+        {!isModalLoading && isModalEmpty && isOnboardingMode && (
+          <OnboardingFeedEmptyState
+            isRefetching={onboardingFeedRefetching}
+            onRetry={onOnboardingFeedRetry}
+          />
+        )}
+
+        {!isModalLoading && isModalEmpty && !isOnboardingMode && (
           <EmptyState onClose={onRequestClose} username={user?.username} />
         )}
 
         {!isModalLoading && !isModalEmpty && currentCardId && (
           <>
-            {topSlot}
-            <div
-              {...handlers}
-              className={classNames(
-                'relative mx-4 mt-2 select-none self-center',
-                isOnboardingMode
-                  ? 'w-[calc(100%-5rem)] max-w-[17.5rem]'
-                  : 'w-[calc(100%-2rem)]',
-              )}
-              style={{ height: cardHeight }}
-            >
-              {isOnboardingMode ? (
-                <>
-                  {nextOnboardingCard && (
-                    <OnboardingPostCard
-                      key={nextOnboardingCard.id}
-                      card={nextOnboardingCard}
-                      isTop={false}
-                      offset={1}
-                      swipeDelta={0}
-                      isDismissAnimating={false}
-                      isDragging={false}
-                      dismissDurationMs={DISMISS_ANIMATION_MS}
-                    />
-                  )}
-                  {currentOnboardingCard && (
-                    <OnboardingPostCard
-                      key={currentOnboardingCard.id}
-                      card={currentOnboardingCard}
-                      isTop
-                      offset={0}
-                      swipeDelta={cardSwipeDelta}
-                      skipDeltaY={cardSkipDelta}
-                      isDismissAnimating={isCurrentTakeAnimating}
-                      isDragging={isDragging}
-                      dismissDurationMs={dismissDurationMs}
+            {!isOnboardingMode && topSlot}
+            {isOnboardingMode ? (
+              <div className="mt-0 flex min-h-0 w-full flex-1 flex-col items-center justify-start gap-4 px-4 pb-6 pt-6 tablet:flex-none tablet:pb-8">
+                {topSlot}
+                {cardSwipeArea}
+                <div className="px-4">
+                  <OnboardingSwipeHintIcons
+                    deltaX={combinedOnboardingSwipeX}
+                    disabled={isAnimating}
+                    onInteresting={() => handleDismiss('right', 'button')}
+                    onNotInteresting={() => handleDismiss('left', 'button')}
+                  />
+                </div>
+                {bottomSlot}
+              </div>
+            ) : (
+              <>
+                {cardSwipeArea}
+                {showDefaultActions && (
+                  <div className="flex items-center justify-center gap-4 p-4 pt-3">
+                    <Button
+                      variant={ButtonVariant.Float}
+                      size={ButtonSize.Large}
+                      icon={
+                        <span
+                          className="text-[1.375rem] leading-none"
+                          aria-hidden
+                        >
+                          ❄️
+                        </span>
+                      }
+                      onClick={() => handleDismiss('left', 'button')}
+                      disabled={isAnimating}
+                      className="!size-14 rounded-full"
+                      aria-label="Cold take - downvote"
                     />
-                  )}
-                </>
-              ) : (
-                <>
-                  {nextTake && (
-                    <HotTakeCard
-                      key={nextTake.id}
-                      hotTake={nextTake}
-                      isTop={false}
-                      offset={1}
-                      swipeDelta={0}
-                      isDismissAnimating={false}
-                      isDragging={false}
-                      dismissDurationMs={DISMISS_ANIMATION_MS}
+                    <Button
+                      variant={ButtonVariant.Float}
+                      size={ButtonSize.Large}
+                      icon={
+                        <span
+                          className="text-[1.375rem] leading-none"
+                          aria-hidden
+                        >
+                          😐
+                        </span>
+                      }
+                      onClick={() => handleSkip('button')}
+                      disabled={isAnimating}
+                      className="!size-12 rounded-full"
+                      aria-label="Skip hot take"
                     />
-                  )}
-                  {currentTake && (
-                    <HotTakeCard
-                      key={currentTake.id}
-                      hotTake={currentTake}
-                      isTop
-                      offset={0}
-                      swipeDelta={cardSwipeDelta}
-                      skipDeltaY={cardSkipDelta}
-                      isDismissAnimating={isCurrentTakeAnimating}
-                      isDragging={isDragging}
-                      dismissDurationMs={dismissDurationMs}
+                    <Button
+                      variant={ButtonVariant.Float}
+                      size={ButtonSize.Large}
+                      icon={
+                        <span
+                          className="text-[1.375rem] leading-none"
+                          aria-hidden
+                        >
+                          🔥
+                        </span>
+                      }
+                      onClick={() => handleDismiss('right', 'button')}
+                      disabled={isAnimating}
+                      className="!size-14 rounded-full"
+                      aria-label="Hot take - upvote"
                     />
-                  )}
-                </>
-              )}
-            </div>
-
-            {showDefaultActions && (
-              <div className="flex items-center justify-center gap-4 p-4 pt-3">
-                <Button
-                  variant={ButtonVariant.Float}
-                  size={ButtonSize.Large}
-                  icon={
-                    <span className="text-[1.375rem] leading-none" aria-hidden>
-                      ❄️
-                    </span>
-                  }
-                  onClick={() => handleDismiss('left', 'button')}
-                  disabled={isAnimating}
-                  className="!size-14 rounded-full"
-                  aria-label="Cold take - downvote"
-                />
-                <Button
-                  variant={ButtonVariant.Float}
-                  size={ButtonSize.Large}
-                  icon={
-                    <span className="text-[1.375rem] leading-none" aria-hidden>
-                      😐
-                    </span>
-                  }
-                  onClick={() => handleSkip('button')}
-                  disabled={isAnimating}
-                  className="!size-12 rounded-full"
-                  aria-label="Skip hot take"
-                />
-                <Button
-                  variant={ButtonVariant.Float}
-                  size={ButtonSize.Large}
-                  icon={
-                    <span className="text-[1.375rem] leading-none" aria-hidden>
-                      🔥
-                    </span>
-                  }
-                  onClick={() => handleDismiss('right', 'button')}
-                  disabled={isAnimating}
-                  className="!size-14 rounded-full"
-                  aria-label="Hot take - upvote"
-                />
-              </div>
-            )}
-
-            {bottomSlot}
-
-            {showAddHotTakeButton && user?.username && (
-              <div className="px-4 pb-4">
-                <Button
-                  variant={ButtonVariant.Tertiary}
-                  size={ButtonSize.Medium}
-                  tag="a"
-                  href={`${webappUrl}${user.username}#hot-takes`}
-                  className="w-full"
-                  onClick={(e: React.MouseEvent) => {
-                    onRequestClose?.(e);
-                  }}
-                >
-                  Add your own hot take
-                </Button>
-              </div>
+                  </div>
+                )}
+                {bottomSlot}
+                {showAddHotTakeButton && user?.username && (
+                  <div className="px-4 pb-4">
+                    <Button
+                      variant={ButtonVariant.Tertiary}
+                      size={ButtonSize.Medium}
+                      tag="a"
+                      href={`${webappUrl}${user.username}#hot-takes`}
+                      className="w-full"
+                      onClick={(e: React.MouseEvent) => {
+                        onRequestClose?.(e);
+                      }}
+                    >
+                      Add your own hot take
+                    </Button>
+                  </div>
+                )}
+              </>
             )}
           </>
         )}
diff --git a/packages/shared/src/components/onboarding/EditTag.tsx b/packages/shared/src/components/onboarding/EditTag.tsx
index b74099cf4e7..9f19d54c9ae 100644
--- a/packages/shared/src/components/onboarding/EditTag.tsx
+++ b/packages/shared/src/components/onboarding/EditTag.tsx
@@ -1,36 +1,22 @@
 import type { ReactElement } from 'react';
 import React, { useState } from 'react';
-import { FeedPreviewControls } from '../feeds';
-import { REQUIRED_TAGS_THRESHOLD } from './common';
 import { Origin } from '../../lib/log';
-import Feed from '../Feed';
-import { OtherFeedPage, RequestKey } from '../../lib/query';
-import { PREVIEW_FEED_QUERY } from '../../graphql/feed';
 import type { FeedSettings } from '../../graphql/feedSettings';
 import { TagSelection } from '../tags/TagSelection';
-import { FeedLayoutProvider } from '../../contexts/FeedContext';
 import useDebounceFn from '../../hooks/useDebounceFn';
 import { useTagSearch } from '../../hooks/useTagSearch';
 import { useViewSize, ViewSize } from '../../hooks/useViewSize';
 import { SearchField } from '../fields/SearchField';
-import { FunnelTargetId } from '../../features/onboarding/types/funnelEvents';
 
 interface EditTagProps {
   feedSettings: FeedSettings;
-  userId: string;
   headline?: string;
-  requiredTags?: number;
 }
 export const EditTag = ({
   feedSettings,
-  userId,
   headline,
-  requiredTags = REQUIRED_TAGS_THRESHOLD,
 }: EditTagProps): ReactElement => {
   const isMobile = useViewSize(ViewSize.MobileL);
-  const [isPreviewVisible, setPreviewVisible] = useState(false);
-  const tagsCount = feedSettings?.includeTags?.length || 0;
-  const isPreviewEnabled = tagsCount >= requiredTags;
 
   const [searchQuery, setSearchQuery] = useState<string>('');
   const [onSearch] = useDebounceFn((value?: string) => {
@@ -63,31 +49,6 @@ export const EditTag = ({
         searchQuery={searchQuery}
         searchTags={searchTags}
       />
-      <FeedPreviewControls
-        isOpen={isPreviewVisible}
-        isDisabled={!isPreviewEnabled}
-        textDisabled={`${tagsCount}/${requiredTags} to show feed preview`}
-        origin={Origin.EditTag}
-        onClick={setPreviewVisible}
-        data-funnel-track={FunnelTargetId.FeedPreview}
-      />
-      {isPreviewEnabled && isPreviewVisible && (
-        <FeedLayoutProvider>
-          <p className="-mb-4 mt-6 text-center text-text-secondary typo-body">
-            Change your tag selection until you&apos;re happy with your feed
-            preview.
-          </p>
-          <Feed
-            className="relative mx-auto px-6 pt-14 tablet:left-1/2 tablet:w-screen tablet:-translate-x-1/2 laptop:pt-10"
-            feedName={OtherFeedPage.Preview}
-            feedQueryKey={[RequestKey.FeedPreview, userId]}
-            query={PREVIEW_FEED_QUERY}
-            showSearch={false}
-            options={{ refetchOnMount: true }}
-            allowPin
-          />
-        </FeedLayoutProvider>
-      )}
     </>
   );
 };
diff --git a/packages/shared/src/features/onboarding/steps/FunnelEditTags.tsx b/packages/shared/src/features/onboarding/steps/FunnelEditTags.tsx
index 684064910d6..831dfdc91a2 100644
--- a/packages/shared/src/features/onboarding/steps/FunnelEditTags.tsx
+++ b/packages/shared/src/features/onboarding/steps/FunnelEditTags.tsx
@@ -14,7 +14,7 @@ function FunnelEditTagsComponent({
   onTransition,
 }: FunnelStepEditTags): ReactElement | null {
   const { feedSettings } = useFeedSettings();
-  const { user, trackingId } = useAuthContext();
+  const { user } = useAuthContext();
   const handleComplete = () => {
     onTransition({
       type: FunnelStepTransitionType.Complete,
@@ -42,11 +42,7 @@ function FunnelEditTagsComponent({
       containerClassName="flex w-full flex-1 flex-col items-center laptop:justify-center overflow-hidden"
     >
       <div className="flex w-full flex-col items-center gap-6 p-6 pt-10 tablet:max-w-md laptop:max-w-screen-laptop">
-        <EditTag
-          headline={headline}
-          userId={user?.id ?? trackingId}
-          feedSettings={feedSettings}
-        />
+        <EditTag headline={headline} feedSettings={feedSettings} />
       </div>
     </FunnelStepCtaWrapper>
   );
diff --git a/packages/webapp/components/onboarding/SwipeOnboardingProgressHeader.tsx b/packages/webapp/components/onboarding/SwipeOnboardingProgressHeader.tsx
new file mode 100644
index 00000000000..64ff996b483
--- /dev/null
+++ b/packages/webapp/components/onboarding/SwipeOnboardingProgressHeader.tsx
@@ -0,0 +1,392 @@
+import type { ReactElement } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '@dailydotdev/shared/src/components/typography/Typography';
+import {
+  getSwipeOnboardingBarProgress,
+  getSwipeOnboardingGuidanceMessage,
+  getSwipeOnboardingHeadline,
+  type SwipeOnboardingProgressCopyVariant,
+} from '../../lib/swipeOnboardingGuidance';
+
+/** Typing speed; full headline refresh when swipe tier copy changes. */
+const SWIPE_HEADLINE_TYPING_MS_PER_CHAR = 12;
+/**
+ * Stable min height = 3 × typo-title2 line-height (1.875rem) so headline changes do not
+ * shift the progress bar.
+ */
+const SWIPE_HEADLINE_BLOCK_MIN_HEIGHT_CLASS = 'min-h-[5.625rem]';
+
+function SwipeOnboardingTypingHeadline({
+  line1,
+  line2,
+}: {
+  line1: string;
+  line2?: string;
+}): ReactElement {
+  const fullText = useMemo(
+    () => (line2 !== undefined ? `${line1}\n${line2}` : line1),
+    [line1, line2],
+  );
+  const [visibleCount, setVisibleCount] = useState(0);
+
+  useEffect(() => {
+    setVisibleCount(0);
+    const len = fullText.length;
+    if (len === 0) {
+      return undefined;
+    }
+    let i = 0;
+    const id = window.setInterval(() => {
+      i += 1;
+      setVisibleCount(Math.min(i, len));
+      if (i >= len) {
+        window.clearInterval(id);
+      }
+    }, SWIPE_HEADLINE_TYPING_MS_PER_CHAR);
+    return () => window.clearInterval(id);
+  }, [fullText]);
+
+  const slice = fullText.slice(0, visibleCount);
+  const parts = slice.split('\n');
+  const shownLine1 = parts[0] ?? '';
+  const shownLine2 = parts.length > 1 ? parts.slice(1).join('\n') : undefined;
+
+  return (
+    <div
+      aria-live="polite"
+      className={`flex w-full max-w-[20rem] flex-col items-center justify-center text-center ${SWIPE_HEADLINE_BLOCK_MIN_HEIGHT_CLASS}`}
+    >
+      <Typography
+        bold
+        center
+        tag={TypographyTag.H2}
+        type={TypographyType.Title2}
+        color={TypographyColor.Primary}
+      >
+        {shownLine1}
+        {shownLine2 !== undefined ? (
+          <>
+            <br />
+            {shownLine2}
+          </>
+        ) : null}
+      </Typography>
+    </div>
+  );
+}
+
+const SWIPE_PROGRESS_MILESTONE_SPARK_OFFSETS: ReadonlyArray<{
+  tx: string;
+  ty: string;
+}> = [
+  { tx: '0rem', ty: '-1.5rem' },
+  { tx: '0.6875rem', ty: '-1.25rem' },
+  { tx: '-0.6875rem', ty: '-1.25rem' },
+  { tx: '1.125rem', ty: '-0.5rem' },
+  { tx: '-1.125rem', ty: '-0.5rem' },
+  { tx: '1.375rem', ty: '0rem' },
+  { tx: '-1.375rem', ty: '0rem' },
+  { tx: '0.9375rem', ty: '0.5625rem' },
+  { tx: '-0.9375rem', ty: '0.5625rem' },
+  { tx: '0.5rem', ty: '1.0625rem' },
+  { tx: '-0.5rem', ty: '1.0625rem' },
+  { tx: '0rem', ty: '1.1875rem' },
+  { tx: '1rem', ty: '-1rem' },
+  { tx: '-1rem', ty: '-1rem' },
+  { tx: '1.1875rem', ty: '0.75rem' },
+  { tx: '-1.1875rem', ty: '0.75rem' },
+];
+
+export type SwipeOnboardingProgressHeaderProps = {
+  /** Swipe count and/or tag selections — same scale as onboarding swipes (0–40+). */
+  progressCount: number;
+  milestoneBurstKey: number;
+  copyVariant?: SwipeOnboardingProgressCopyVariant;
+};
+
+export function SwipeOnboardingProgressHeader({
+  progressCount,
+  milestoneBurstKey,
+  copyVariant = 'swipe',
+}: SwipeOnboardingProgressHeaderProps): ReactElement {
+  const progress = getSwipeOnboardingBarProgress(progressCount);
+  const { line1: headlineLine1, line2: headlineLine2 } =
+    getSwipeOnboardingHeadline(progressCount, copyVariant);
+
+  return (
+    <div className="pointer-events-none flex w-full max-w-[20rem] select-none flex-col items-center gap-8 self-center px-4 pb-2 pt-0 text-center">
+      {/* eslint-disable-next-line react/no-unknown-property -- scoped keyframes for progress bar */}
+      <style>{`
+              @keyframes swipeOnboardingProgressShimmer {
+                0% {
+                  transform: translateX(-130%);
+                }
+                100% {
+                  transform: translateX(320%);
+                }
+              }
+              @keyframes swipeOnboardingTrackShimmer {
+                0% {
+                  transform: translateX(-120%);
+                }
+                100% {
+                  transform: translateX(280%);
+                }
+              }
+              @keyframes swipeOnboardingTrackBreath {
+                0%,
+                100% {
+                  opacity: 1;
+                }
+                50% {
+                  opacity: 0.72;
+                }
+              }
+              @keyframes swipeOnboardingProgressGradientFlow {
+                0% {
+                  background-position: 0% 50%;
+                }
+                100% {
+                  background-position: 100% 50%;
+                }
+              }
+              @keyframes swipeOnboardingProgressSheen {
+                0% {
+                  transform: translateX(-150%);
+                }
+                100% {
+                  transform: translateX(350%);
+                }
+              }
+              @keyframes swipeOnboardingProgressEdge {
+                0%,
+                100% {
+                  transform: translateX(0) scaleY(1);
+                }
+                50% {
+                  transform: translateX(-0.125rem) scaleY(1.12);
+                }
+              }
+              @keyframes swipeOnboardingMilestoneGlowBurst {
+                0% {
+                  opacity: 0;
+                  box-shadow: 0 0 0 0 transparent;
+                }
+                10% {
+                  opacity: 1;
+                  /* Shadow-only burst (no scaleY): scaling an empty layer caused dark compositing. */
+                  box-shadow:
+                    0 0 0.5rem 0.25rem
+                      rgb(from var(--theme-accent-cheese-default) r g b / 0.85),
+                    0 0.2rem 1.15rem 0.5rem
+                      rgb(from var(--theme-accent-cabbage-default) r g b / 0.65),
+                    0 -0.2rem 1.15rem 0.5rem
+                      rgb(from var(--theme-accent-cabbage-default) r g b / 0.55),
+                    0 0 1.75rem 0.75rem
+                      rgb(from var(--theme-accent-avocado-default) r g b / 0.5),
+                    0 0 2.75rem 1.125rem
+                      rgb(from var(--theme-accent-cheese-default) r g b / 0.38),
+                    0 0 3.5rem 1.5rem
+                      rgb(from var(--theme-accent-cabbage-default) r g b / 0.26);
+                }
+                32% {
+                  opacity: 0.92;
+                  box-shadow:
+                    0 0 0.625rem 0.3125rem
+                      rgb(from var(--theme-accent-cheese-default) r g b / 0.65),
+                    0 0.15rem 1.25rem 0.55rem
+                      rgb(from var(--theme-accent-cabbage-default) r g b / 0.48),
+                    0 -0.15rem 1.25rem 0.55rem
+                      rgb(from var(--theme-accent-cabbage-default) r g b / 0.4),
+                    0 0 2.25rem 1rem
+                      rgb(from var(--theme-accent-avocado-default) r g b / 0.36);
+                }
+                100% {
+                  opacity: 0;
+                  box-shadow: 0 0 0 0 transparent;
+                }
+              }
+              @keyframes swipeOnboardingMilestoneRipple {
+                0% {
+                  transform: translate(-50%, -50%) scale(0.35);
+                  opacity: 0.95;
+                  border-width: 0.125rem;
+                }
+                100% {
+                  transform: translate(-50%, -50%) scale(6);
+                  opacity: 0;
+                  border-width: 0.0625rem;
+                }
+              }
+              @keyframes swipeOnboardingSparkBurst {
+                0% {
+                  transform: translate(0, 0) scale(2.1);
+                  opacity: 1;
+                }
+                100% {
+                  transform: translate(var(--spark-tx), var(--spark-ty))
+                    scale(0.15);
+                  opacity: 0;
+                }
+              }
+            `}</style>
+      <SwipeOnboardingTypingHeadline
+        line1={headlineLine1}
+        line2={headlineLine2}
+      />
+      <div className="flex w-full flex-col gap-2">
+        <div
+          className="relative z-0 h-3 w-full overflow-visible rounded-50 bg-border-subtlest-tertiary"
+          style={{
+            animation: 'swipeOnboardingTrackBreath 2.8s ease-in-out infinite',
+          }}
+        >
+          <div className="pointer-events-none absolute inset-0 overflow-hidden rounded-50">
+            <div
+              className="via-accent-cabbage-default/35 pointer-events-none absolute inset-y-0 w-1/2 bg-gradient-to-r from-transparent to-transparent"
+              style={{
+                animation:
+                  'swipeOnboardingTrackShimmer 2.6s ease-in-out infinite',
+              }}
+            />
+          </div>
+          {milestoneBurstKey > 0 && progress > 0 && (
+            <div
+              key={`glow-${milestoneBurstKey}`}
+              aria-hidden
+              className="pointer-events-none absolute left-0 top-0 z-[3] h-full overflow-visible rounded-50 bg-transparent"
+              style={{
+                width: `${progress}%`,
+                animation:
+                  'swipeOnboardingMilestoneGlowBurst 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards',
+              }}
+            />
+          )}
+          <div
+            className="relative z-[1] h-full overflow-hidden rounded-50 transition-[width] duration-300 ease-in-out"
+            style={{
+              width: `${progress}%`,
+              backgroundImage: `linear-gradient(
+                      105deg,
+                      var(--theme-accent-cabbage-default) 0%,
+                      var(--theme-accent-avocado-default) 22%,
+                      var(--theme-accent-cheese-default) 44%,
+                      var(--theme-accent-cabbage-default) 66%,
+                      var(--theme-accent-avocado-default) 88%,
+                      var(--theme-accent-cheese-default) 100%
+                    )`,
+              backgroundSize: '240% 100%',
+              backgroundPosition: '0% 50%',
+              animation:
+                'swipeOnboardingProgressGradientFlow 2.2s linear infinite',
+            }}
+          >
+            <div
+              className="via-accent-cheese-default/50 opacity-80 pointer-events-none absolute inset-y-0 w-[55%] bg-gradient-to-r from-transparent to-transparent"
+              style={{
+                animation:
+                  'swipeOnboardingProgressShimmer 1.85s linear infinite',
+              }}
+            />
+            <div
+              aria-hidden
+              className="pointer-events-none absolute inset-0 overflow-hidden rounded-50"
+            >
+              <div
+                className="via-white/45 opacity-70 pointer-events-none absolute inset-y-0 w-[38%] bg-gradient-to-r from-transparent to-transparent mix-blend-overlay"
+                style={{
+                  animation:
+                    'swipeOnboardingProgressSheen 2.4s linear infinite',
+                  willChange: 'transform',
+                }}
+              />
+            </div>
+            <div
+              aria-hidden
+              className="from-white/55 opacity-90 pointer-events-none absolute inset-y-[-2px] right-0 w-[3px] rounded-r-50 bg-gradient-to-l to-transparent mix-blend-soft-light"
+              style={{
+                animation:
+                  'swipeOnboardingProgressEdge 1.25s ease-in-out infinite',
+                opacity: progress > 0 ? undefined : 0,
+              }}
+            />
+          </div>
+          {milestoneBurstKey > 0 && progress > 0 && (
+            <div
+              key={milestoneBurstKey}
+              aria-hidden
+              className="pointer-events-none absolute inset-0 z-[4] overflow-visible"
+            >
+              <div
+                className="absolute"
+                style={{
+                  left: `${progress}%`,
+                  top: '50%',
+                  width: 0,
+                  height: 0,
+                }}
+              >
+                <div
+                  className="pointer-events-none absolute box-border rounded-full"
+                  style={{
+                    left: '50%',
+                    top: '50%',
+                    width: '0.75rem',
+                    height: '0.75rem',
+                    marginLeft: '-0.375rem',
+                    marginTop: '-0.375rem',
+                    borderStyle: 'solid',
+                    borderColor:
+                      'rgb(from var(--theme-accent-cheese-default) r g b / 0.9)',
+                    backgroundColor:
+                      'rgb(from var(--theme-accent-cheese-default) r g b / 0.42)',
+                    animation:
+                      'swipeOnboardingMilestoneRipple 0.85s cubic-bezier(0.15, 0.85, 0.2, 1) forwards',
+                  }}
+                />
+                {SWIPE_PROGRESS_MILESTONE_SPARK_OFFSETS.map(
+                  (sp, sparkIndex) => (
+                    <span
+                      key={`${milestoneBurstKey}-${sp.tx}-${sp.ty}`}
+                      className="absolute block rounded-full bg-accent-cheese-default"
+                      style={
+                        {
+                          width: '0.3125rem',
+                          height: '0.3125rem',
+                          marginLeft: '-0.15625rem',
+                          marginTop: '-0.15625rem',
+                          boxShadow:
+                            '0 0 0.375rem rgb(from var(--theme-accent-cheese-default) r g b / 0.9), 0 0 0.75rem rgb(from var(--theme-accent-cabbage-default) r g b / 0.75), 0 0 1.125rem rgb(from var(--theme-accent-avocado-default) r g b / 0.45)',
+                          '--spark-tx': sp.tx,
+                          '--spark-ty': sp.ty,
+                          animation:
+                            'swipeOnboardingSparkBurst 0.75s cubic-bezier(0.12, 0.9, 0.22, 1) forwards',
+                          animationDelay: `${sparkIndex * 0.022}s`,
+                        } as React.CSSProperties
+                      }
+                    />
+                  ),
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+        <Typography
+          bold
+          center
+          className="text-balance"
+          tag={TypographyTag.P}
+          type={TypographyType.Caption1}
+          color={TypographyColor.Secondary}
+        >
+          {getSwipeOnboardingGuidanceMessage(progressCount, copyVariant)}
+        </Typography>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/webapp/lib/swipeOnboardingEligiblePosts.spec.ts b/packages/webapp/lib/swipeOnboardingEligiblePosts.spec.ts
new file mode 100644
index 00000000000..5ed289ab8ff
--- /dev/null
+++ b/packages/webapp/lib/swipeOnboardingEligiblePosts.spec.ts
@@ -0,0 +1,89 @@
+import type { Post } from '@dailydotdev/shared/src/graphql/posts';
+import { SourceType } from '@dailydotdev/shared/src/graphql/sources';
+import { PostType } from '@dailydotdev/shared/src/types';
+import {
+  isSwipeOnboardingEligiblePost,
+  isSwipeOnboardingRelaxedEligiblePost,
+} from './swipeOnboardingEligiblePosts';
+
+function post(
+  type: PostType,
+  sourceType: SourceType,
+): Pick<Post, 'type' | 'source'> {
+  return {
+    type,
+    source: {
+      id: 's',
+      type: sourceType,
+    } as Post['source'],
+  };
+}
+
+describe('isSwipeOnboardingEligiblePost', () => {
+  it('accepts article, video, and poll from machine sources', () => {
+    expect(isSwipeOnboardingEligiblePost(post(PostType.Article, SourceType.Machine)))
+      .toBe(true);
+    expect(
+      isSwipeOnboardingEligiblePost(post(PostType.VideoYouTube, SourceType.Machine)),
+    ).toBe(true);
+    expect(isSwipeOnboardingEligiblePost(post(PostType.Poll, SourceType.Machine))).toBe(
+      true,
+    );
+  });
+
+  it('rejects non-machine sources', () => {
+    expect(isSwipeOnboardingEligiblePost(post(PostType.Article, SourceType.Squad))).toBe(
+      false,
+    );
+    expect(isSwipeOnboardingEligiblePost(post(PostType.Article, SourceType.User))).toBe(
+      false,
+    );
+  });
+
+  it('rejects collection, share, freeform, and social posts even from machine', () => {
+    expect(
+      isSwipeOnboardingEligiblePost(post(PostType.Collection, SourceType.Machine)),
+    ).toBe(false);
+    expect(isSwipeOnboardingEligiblePost(post(PostType.Share, SourceType.Machine))).toBe(
+      false,
+    );
+    expect(
+      isSwipeOnboardingEligiblePost(post(PostType.Freeform, SourceType.Machine)),
+    ).toBe(false);
+    expect(
+      isSwipeOnboardingEligiblePost(post(PostType.SocialTwitter, SourceType.Machine)),
+    ).toBe(false);
+  });
+
+  it('rejects when source is missing', () => {
+    expect(
+      isSwipeOnboardingEligiblePost({
+        type: PostType.Article,
+        source: undefined,
+      }),
+    ).toBe(false);
+  });
+});
+
+describe('isSwipeOnboardingRelaxedEligiblePost', () => {
+  it('accepts article types from any source', () => {
+    expect(
+      isSwipeOnboardingRelaxedEligiblePost(
+        post(PostType.Article, SourceType.Squad),
+      ),
+    ).toBe(true);
+    expect(
+      isSwipeOnboardingRelaxedEligiblePost(
+        post(PostType.Article, SourceType.User),
+      ),
+    ).toBe(true);
+  });
+
+  it('rejects types outside onboarding feed set', () => {
+    expect(
+      isSwipeOnboardingRelaxedEligiblePost(
+        post(PostType.Share, SourceType.Machine),
+      ),
+    ).toBe(false);
+  });
+});
diff --git a/packages/webapp/lib/swipeOnboardingEligiblePosts.ts b/packages/webapp/lib/swipeOnboardingEligiblePosts.ts
new file mode 100644
index 00000000000..30e6e9909a8
--- /dev/null
+++ b/packages/webapp/lib/swipeOnboardingEligiblePosts.ts
@@ -0,0 +1,40 @@
+import type { Post } from '@dailydotdev/shared/src/graphql/posts';
+import { SourceType } from '@dailydotdev/shared/src/graphql/sources';
+import { PostType } from '@dailydotdev/shared/src/types';
+
+/** Post types we request for swipe onboarding (no shares, collections, freeform, etc.). */
+export const SWIPE_ONBOARDING_FEED_SUPPORTED_TYPES: readonly PostType[] = [
+  PostType.Article,
+  PostType.VideoYouTube,
+  PostType.Poll,
+];
+
+const swipeOnboardingEligibleTypes: ReadonlySet<PostType> = new Set(
+  SWIPE_ONBOARDING_FEED_SUPPORTED_TYPES,
+);
+
+/**
+ * Swipe onboarding should only surface publication (machine source) posts — not squads,
+ * user sources, collections, shares, or freeform.
+ */
+export function isSwipeOnboardingEligiblePost(
+  post: Pick<Post, 'type' | 'source'>,
+): boolean {
+  if (!post.source || post.source.type !== SourceType.Machine) {
+    return false;
+  }
+  return swipeOnboardingEligibleTypes.has(post.type);
+}
+
+/**
+ * Same allowed post types as strict onboarding, any source — used to pad the deck when
+ * machine-only results are thin (still excludes types not returned by the feed query).
+ */
+export function isSwipeOnboardingRelaxedEligiblePost(
+  post: Pick<Post, 'type' | 'source'>,
+): boolean {
+  if (!post.source) {
+    return false;
+  }
+  return swipeOnboardingEligibleTypes.has(post.type);
+}
diff --git a/packages/webapp/lib/swipeOnboardingGuidance.spec.ts b/packages/webapp/lib/swipeOnboardingGuidance.spec.ts
new file mode 100644
index 00000000000..89422ed4efc
--- /dev/null
+++ b/packages/webapp/lib/swipeOnboardingGuidance.spec.ts
@@ -0,0 +1,159 @@
+import {
+  getSwipeOnboardingBarProgress,
+  getSwipeOnboardingGuidanceMessage,
+  getSwipeOnboardingHeadline,
+} from './swipeOnboardingGuidance';
+
+describe('getSwipeOnboardingGuidanceMessage', () => {
+  it('returns starter tier with remaining count for 0 to 9 (swipe)', () => {
+    expect(getSwipeOnboardingGuidanceMessage(0)).toBe(
+      'Swipe 10 posts to get started.',
+    );
+    expect(getSwipeOnboardingGuidanceMessage(1)).toBe(
+      'Swipe 9 more posts to get started.',
+    );
+    expect(getSwipeOnboardingGuidanceMessage(9)).toBe(
+      'Swipe 1 more post to get started.',
+    );
+  });
+
+  it('returns improve tier with remaining until 20 (swipe)', () => {
+    expect(getSwipeOnboardingGuidanceMessage(10)).toBe(
+      'Swipe 10 more posts.',
+    );
+    expect(getSwipeOnboardingGuidanceMessage(15)).toBe(
+      'Swipe 5 more posts.',
+    );
+    expect(getSwipeOnboardingGuidanceMessage(19)).toBe(
+      'Swipe 1 more post.',
+    );
+  });
+
+  it('returns refine tier with remaining until 40 (swipe)', () => {
+    expect(getSwipeOnboardingGuidanceMessage(20)).toBe(
+      'Swipe 20 more posts.',
+    );
+    expect(getSwipeOnboardingGuidanceMessage(30)).toBe(
+      'Swipe 10 more posts.',
+    );
+    expect(getSwipeOnboardingGuidanceMessage(39)).toBe(
+      'Swipe 1 more post.',
+    );
+  });
+
+  it('returns fine-tune copy for 40 or more (swipe)', () => {
+    expect(getSwipeOnboardingGuidanceMessage(40)).toBe('Swipe for fine-tune.');
+    expect(getSwipeOnboardingGuidanceMessage(100)).toBe('Swipe for fine-tune.');
+  });
+
+  it('returns tag variant with remaining counts per tier', () => {
+    expect(getSwipeOnboardingGuidanceMessage(0, 'tags')).toBe(
+      'Pick 10 tags to get started.',
+    );
+    expect(getSwipeOnboardingGuidanceMessage(3, 'tags')).toBe(
+      'Pick 7 more tags to get started.',
+    );
+    expect(getSwipeOnboardingGuidanceMessage(10, 'tags')).toBe(
+      'Pick 10 more tags.',
+    );
+    expect(getSwipeOnboardingGuidanceMessage(19, 'tags')).toBe(
+      'Pick 1 more tag.',
+    );
+    expect(getSwipeOnboardingGuidanceMessage(25, 'tags')).toBe(
+      'Pick 15 more tags.',
+    );
+    expect(getSwipeOnboardingGuidanceMessage(40, 'tags')).toBe(
+      'Add tags for fine-tune.',
+    );
+  });
+});
+
+describe('getSwipeOnboardingHeadline', () => {
+  it('returns fixed two-line starter for 0–9 (swipe)', () => {
+    expect(getSwipeOnboardingHeadline(0)).toEqual({
+      line1: 'Tune your feed.',
+      line2: 'Swipe on at least 10 posts to get started.',
+    });
+    expect(getSwipeOnboardingHeadline(5)).toEqual({
+      line1: 'Tune your feed.',
+      line2: 'Swipe on at least 10 posts to get started.',
+    });
+    expect(getSwipeOnboardingHeadline(9)).toEqual({
+      line1: 'Tune your feed.',
+      line2: 'Swipe on at least 10 posts to get started.',
+    });
+  });
+
+  it('returns fixed improve-tier headline for 10–19 (swipe)', () => {
+    expect(getSwipeOnboardingHeadline(10)).toEqual({
+      line1: 'Keep going, 10 more and it gets better.',
+    });
+    expect(getSwipeOnboardingHeadline(15)).toEqual({
+      line1: 'Keep going, 10 more and it gets better.',
+    });
+    expect(getSwipeOnboardingHeadline(19)).toEqual({
+      line1: 'Keep going, 10 more and it gets better.',
+    });
+  });
+
+  it('returns fixed refine-tier headline for 20–39 (swipe)', () => {
+    expect(getSwipeOnboardingHeadline(20)).toEqual({
+      line1: "You're getting there, 20 more to dial it in.",
+    });
+    expect(getSwipeOnboardingHeadline(30)).toEqual({
+      line1: "You're getting there, 20 more to dial it in.",
+    });
+    expect(getSwipeOnboardingHeadline(39)).toEqual({
+      line1: "You're getting there, 20 more to dial it in.",
+    });
+  });
+
+  it('returns completion headline at 40 and above (swipe)', () => {
+    expect(getSwipeOnboardingHeadline(40)).toEqual({
+      line1: "You're all set! Keep swiping to fine-tune.",
+    });
+  });
+
+  it('uses fixed tag wording per tier when variant is tags', () => {
+    expect(getSwipeOnboardingHeadline(0, 'tags')).toEqual({
+      line1: 'Tune your feed.',
+      line2: 'Pick at least 10 tags to get started.',
+    });
+    expect(getSwipeOnboardingHeadline(7, 'tags')).toEqual({
+      line1: 'Tune your feed.',
+      line2: 'Pick at least 10 tags to get started.',
+    });
+    expect(getSwipeOnboardingHeadline(12, 'tags')).toEqual({
+      line1: 'Keep going, 10 more and it gets better.',
+    });
+    expect(getSwipeOnboardingHeadline(35, 'tags')).toEqual({
+      line1: "You're getting there, 20 more to dial it in.",
+    });
+    expect(getSwipeOnboardingHeadline(40, 'tags')).toEqual({
+      line1: "You're all set! Keep adding tags to fine-tune.",
+    });
+  });
+});
+
+describe('getSwipeOnboardingBarProgress', () => {
+  it('fills 0 to 100% for swipes 0 to 9, then shows 25% at swipe 10 (first quarter)', () => {
+    expect(getSwipeOnboardingBarProgress(0)).toBe(0);
+    expect(getSwipeOnboardingBarProgress(5)).toBe(50);
+    expect(getSwipeOnboardingBarProgress(9)).toBe(90);
+    expect(getSwipeOnboardingBarProgress(10)).toBe(25);
+  });
+
+  it('advances each 25% segment over the next 10 swipes through 40', () => {
+    expect(getSwipeOnboardingBarProgress(15)).toBe(37.5);
+    expect(getSwipeOnboardingBarProgress(19)).toBe(47.5);
+    expect(getSwipeOnboardingBarProgress(20)).toBe(50);
+    expect(getSwipeOnboardingBarProgress(30)).toBe(75);
+    expect(getSwipeOnboardingBarProgress(39)).toBe(97.5);
+    expect(getSwipeOnboardingBarProgress(40)).toBe(100);
+    expect(getSwipeOnboardingBarProgress(99)).toBe(100);
+  });
+
+  it('clamps negative swipe counts to 0', () => {
+    expect(getSwipeOnboardingBarProgress(-1)).toBe(0);
+  });
+});
diff --git a/packages/webapp/lib/swipeOnboardingGuidance.ts b/packages/webapp/lib/swipeOnboardingGuidance.ts
new file mode 100644
index 00000000000..882b4b9a55f
--- /dev/null
+++ b/packages/webapp/lib/swipeOnboardingGuidance.ts
@@ -0,0 +1,141 @@
+/** Minimum swipes before “Continue” unlocks (tier 0 ends at this minus 1). */
+export const SWIPE_ONBOARDING_MIN_TO_UNLOCK = 10;
+
+/** Second staircase (refine tier starts at this count). */
+export const SWIPE_ONBOARDING_IMPROVE_MILESTONE = 20;
+
+/** Swipe count at which the bar is full and “all set” copy starts. */
+export const SWIPE_ONBOARDING_REFINE_TARGET = 40;
+
+/** Number of equal segments on the onboarding progress bar (25% each). */
+export const SWIPE_ONBOARDING_BAR_STAGE_COUNT = 4;
+
+const swipesPerBarStage =
+  SWIPE_ONBOARDING_REFINE_TARGET / SWIPE_ONBOARDING_BAR_STAGE_COUNT;
+
+if (!Number.isInteger(swipesPerBarStage)) {
+  throw new Error(
+    'SWIPE_ONBOARDING_REFINE_TARGET must divide evenly by SWIPE_ONBOARDING_BAR_STAGE_COUNT',
+  );
+}
+
+const barSegmentPercent = 100 / SWIPE_ONBOARDING_BAR_STAGE_COUNT;
+
+/**
+ * Progress bar fill (0 to 100). First {@link SWIPE_ONBOARDING_MIN_TO_UNLOCK} steps
+ * animate the full bar from 0% to 100%; after that the bar uses four 25% segments (10 steps
+ * each) up to {@link SWIPE_ONBOARDING_REFINE_TARGET}.
+ */
+export function getSwipeOnboardingBarProgress(progressCount: number): number {
+  const n = Math.max(0, progressCount);
+
+  if (n >= SWIPE_ONBOARDING_REFINE_TARGET) {
+    return 100;
+  }
+
+  if (n < SWIPE_ONBOARDING_MIN_TO_UNLOCK) {
+    return (n / SWIPE_ONBOARDING_MIN_TO_UNLOCK) * 100;
+  }
+
+  const stageIndex = Math.floor(n / swipesPerBarStage);
+  const positionInStage = n % swipesPerBarStage;
+
+  return (
+    stageIndex * barSegmentPercent +
+    (positionInStage / swipesPerBarStage) * barSegmentPercent
+  );
+}
+
+export type SwipeOnboardingHeadline = {
+  line1: string;
+  line2?: string;
+};
+
+/** Same progress tiers as swipes; copy refers to tags instead. */
+export type SwipeOnboardingProgressCopyVariant = 'swipe' | 'tags';
+
+function unitWord(
+  count: number,
+  singular: string,
+  plural: string,
+): string {
+  return count === 1 ? singular : plural;
+}
+
+/**
+ * Main title above the progress bar (one or two lines).
+ * Copy is fixed per tier only — counts update in {@link getSwipeOnboardingGuidanceMessage}, not here.
+ */
+export function getSwipeOnboardingHeadline(
+  progressCount: number,
+  variant: SwipeOnboardingProgressCopyVariant = 'swipe',
+): SwipeOnboardingHeadline {
+  const n = Math.max(0, progressCount);
+
+  if (n < SWIPE_ONBOARDING_MIN_TO_UNLOCK) {
+    return {
+      line1: 'Tune your feed.',
+      line2:
+        variant === 'tags'
+          ? 'Pick at least 10 tags to get started.'
+          : 'Swipe on at least 10 posts to get started.',
+    };
+  }
+
+  if (n >= SWIPE_ONBOARDING_REFINE_TARGET) {
+    return {
+      line1:
+        variant === 'tags'
+          ? "You're all set! Keep adding tags to fine-tune."
+          : "You're all set! Keep swiping to fine-tune.",
+    };
+  }
+
+  if (n < SWIPE_ONBOARDING_IMPROVE_MILESTONE) {
+    return { line1: 'Keep going, 10 more and it gets better.' };
+  }
+
+  return { line1: "You're getting there, 20 more to dial it in." };
+}
+
+/**
+ * Action-based copy for onboarding progress (swipes or tag picks use the same thresholds).
+ */
+export function getSwipeOnboardingGuidanceMessage(
+  progressCount: number,
+  variant: SwipeOnboardingProgressCopyVariant = 'swipe',
+): string {
+  const n = Math.max(0, progressCount);
+
+  if (n >= SWIPE_ONBOARDING_REFINE_TARGET) {
+    return variant === 'tags' ? 'Add tags for fine-tune.' : 'Swipe for fine-tune.';
+  }
+
+  if (n >= SWIPE_ONBOARDING_IMPROVE_MILESTONE) {
+    const remaining = SWIPE_ONBOARDING_REFINE_TARGET - n;
+    return variant === 'tags'
+      ? `Pick ${remaining} more ${unitWord(remaining, 'tag', 'tags')}.`
+      : `Swipe ${remaining} more ${unitWord(remaining, 'post', 'posts')}.`;
+  }
+
+  if (n >= SWIPE_ONBOARDING_MIN_TO_UNLOCK) {
+    const remaining = SWIPE_ONBOARDING_IMPROVE_MILESTONE - n;
+    return variant === 'tags'
+      ? `Pick ${remaining} more ${unitWord(remaining, 'tag', 'tags')}.`
+      : `Swipe ${remaining} more ${unitWord(remaining, 'post', 'posts')}.`;
+  }
+
+  if (variant === 'tags') {
+    if (n === 0) {
+      return 'Pick 10 tags to get started.';
+    }
+    const remaining = SWIPE_ONBOARDING_MIN_TO_UNLOCK - n;
+    return `Pick ${remaining} more ${unitWord(remaining, 'tag', 'tags')} to get started.`;
+  }
+
+  if (n === 0) {
+    return 'Swipe 10 posts to get started.';
+  }
+  const remaining = SWIPE_ONBOARDING_MIN_TO_UNLOCK - n;
+  return `Swipe ${remaining} more ${unitWord(remaining, 'post', 'posts')} to get started.`;
+}
diff --git a/packages/webapp/lib/swipeOnboardingPopularDeck.ts b/packages/webapp/lib/swipeOnboardingPopularDeck.ts
new file mode 100644
index 00000000000..c99c87689ef
--- /dev/null
+++ b/packages/webapp/lib/swipeOnboardingPopularDeck.ts
@@ -0,0 +1,77 @@
+import type { Connection } from '@dailydotdev/shared/src/graphql/common';
+import { gqlClient } from '@dailydotdev/shared/src/graphql/common';
+import { MOST_UPVOTED_FEED_QUERY } from '@dailydotdev/shared/src/graphql/feed';
+import type { Post } from '@dailydotdev/shared/src/graphql/posts';
+import {
+  isSwipeOnboardingEligiblePost,
+  isSwipeOnboardingRelaxedEligiblePost,
+  SWIPE_ONBOARDING_FEED_SUPPORTED_TYPES,
+} from './swipeOnboardingEligiblePosts';
+
+const PAGE_SIZE = 50;
+const MAX_PAGES = 12;
+const TARGET_STRICT_COUNT = 40;
+/** After paging, if strict (machine) posts are below this, append relaxed same-type posts. */
+const STRICT_MIN_BEFORE_RELAXED = 24;
+const MAX_DECK_POSTS = 100;
+
+type MostUpvotedFeedResponse = {
+  page?: Connection<Post>;
+};
+
+/**
+ * Paginates mostUpvotedFeed for swipe onboarding: prefers machine-sourced posts, then
+ * fills with the same post types from any source when the strict list is short.
+ */
+export async function fetchSwipeOnboardingPopularDeck(): Promise<Post[]> {
+  const seenIds = new Set<string>();
+  const strictPosts: Post[] = [];
+  const relaxedPosts: Post[] = [];
+
+  let cursor: string | undefined;
+  let pages = 0;
+
+  while (pages < MAX_PAGES) {
+    const data = await gqlClient.request<MostUpvotedFeedResponse>(
+      MOST_UPVOTED_FEED_QUERY,
+      {
+        first: PAGE_SIZE,
+        period: 30,
+        ...(cursor !== undefined ? { after: cursor } : {}),
+        supportedTypes: [...SWIPE_ONBOARDING_FEED_SUPPORTED_TYPES],
+      },
+    );
+
+    const conn = data.page;
+    const edges = conn?.edges ?? [];
+
+    for (const { node } of edges) {
+      if (seenIds.has(node.id)) {
+        continue;
+      }
+      seenIds.add(node.id);
+      if (isSwipeOnboardingEligiblePost(node)) {
+        strictPosts.push(node);
+      } else if (isSwipeOnboardingRelaxedEligiblePost(node)) {
+        relaxedPosts.push(node);
+      }
+    }
+
+    pages += 1;
+
+    const hasNext = conn?.pageInfo?.hasNextPage === true;
+    const endCursor = conn?.pageInfo?.endCursor ?? undefined;
+
+    if (strictPosts.length >= TARGET_STRICT_COUNT || !hasNext || !endCursor) {
+      break;
+    }
+    cursor = endCursor;
+  }
+
+  if (strictPosts.length >= STRICT_MIN_BEFORE_RELAXED) {
+    return strictPosts.slice(0, MAX_DECK_POSTS);
+  }
+
+  const merged = [...strictPosts, ...relaxedPosts];
+  return merged.slice(0, MAX_DECK_POSTS);
+}
diff --git a/packages/webapp/pages/onboarding/swipe.tsx b/packages/webapp/pages/onboarding/swipe.tsx
index 95f29a604e6..0773348810b 100644
--- a/packages/webapp/pages/onboarding/swipe.tsx
+++ b/packages/webapp/pages/onboarding/swipe.tsx
@@ -1,17 +1,29 @@
 import type { ReactElement } from 'react';
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import classNames from 'classnames';
 import { useRouter } from 'next/router';
 import type { NextSeoProps } from 'next-seo';
 import AuthOptions from '@dailydotdev/shared/src/components/auth/AuthOptions';
 import { AuthDisplay } from '@dailydotdev/shared/src/components/auth/common';
 import type { AuthOptionsProps } from '@dailydotdev/shared/src/components/auth/common';
-import { OnboardingHeader } from '@dailydotdev/shared/src/components/onboarding';
+import {
+  EditTag,
+  OnboardingHeader,
+} from '@dailydotdev/shared/src/components/onboarding';
+import { Modal } from '@dailydotdev/shared/src/components/modals/common/Modal';
+import { ModalSize } from '@dailydotdev/shared/src/components/modals/common/types';
 import {
   FooterLinks,
   withFeaturesBoundary,
 } from '@dailydotdev/shared/src/components';
 import { ErrorBoundary } from '@dailydotdev/shared/src/components/ErrorBoundary';
+import { Loader } from '@dailydotdev/shared/src/components/Loader';
 import { useAuthContext } from '@dailydotdev/shared/src/contexts/AuthContext';
 import { redirectToApp } from '@dailydotdev/shared/src/features/onboarding/lib/utils';
 import { ActionType } from '@dailydotdev/shared/src/graphql/actions';
@@ -22,26 +34,24 @@ import {
   ButtonSize,
   ButtonVariant,
 } from '@dailydotdev/shared/src/components/buttons/Button';
-import {
-  DownvoteIcon,
-  UpvoteIcon,
-} from '@dailydotdev/shared/src/components/icons';
-import { IconSize } from '@dailydotdev/shared/src/components/Icon';
+import { ArrowIcon } from '@dailydotdev/shared/src/components/icons';
 import HotAndColdModal from '@dailydotdev/shared/src/components/modals/hotTakes/HotAndColdModal';
 import type { OnboardingSwipeCard } from '@dailydotdev/shared/src/components/modals/hotTakes/HotAndColdModal';
-import Logo, { LogoPosition } from '@dailydotdev/shared/src/components/Logo';
-import {
-  Typography,
-  TypographyColor,
-  TypographyType,
-} from '@dailydotdev/shared/src/components/typography/Typography';
 import { useQuery } from '@tanstack/react-query';
-import { MOST_UPVOTED_FEED_QUERY } from '@dailydotdev/shared/src/graphql/feed';
-import { gqlClient } from '@dailydotdev/shared/src/graphql/common';
 import type { Post } from '@dailydotdev/shared/src/graphql/posts';
 import { useConditionalFeature } from '@dailydotdev/shared/src/hooks/useConditionalFeature';
+import useFeedSettings from '@dailydotdev/shared/src/hooks/useFeedSettings';
+import useTagAndSource from '@dailydotdev/shared/src/hooks/useTagAndSource';
 import { swipeOnboardingFeature } from '@dailydotdev/shared/src/lib/featureManagement';
+import { Origin } from '@dailydotdev/shared/src/lib/log';
 import { getPageSeoTitles } from '../../components/layouts/utils';
+import { SwipeOnboardingProgressHeader } from '../../components/onboarding/SwipeOnboardingProgressHeader';
+import { fetchSwipeOnboardingPopularDeck } from '../../lib/swipeOnboardingPopularDeck';
+import {
+  SWIPE_ONBOARDING_IMPROVE_MILESTONE,
+  SWIPE_ONBOARDING_MIN_TO_UNLOCK,
+  SWIPE_ONBOARDING_REFINE_TARGET,
+} from '../../lib/swipeOnboardingGuidance';
 import { defaultOpenGraph, defaultSeo } from '../../next-seo';
 
 const seoTitles = getPageSeoTitles('Swipe onboarding');
@@ -51,33 +61,57 @@ const seo: NextSeoProps = {
   ...defaultSeo,
 };
 const swipeOnboardingPreviewQueryKey = 'swipeOnboardingPreview';
-const MIN_SWIPES_TO_CONTINUE = 10;
+const MIN_SWIPES_TO_CONTINUE = SWIPE_ONBOARDING_MIN_TO_UNLOCK;
 
-interface PopularFeedQueryData {
-  page?: {
-    edges?: Array<{
-      node: Post;
-    }>;
-  };
-}
+const SWIPE_ONBOARDING_PROGRESS_MILESTONES: readonly number[] = [
+  SWIPE_ONBOARDING_MIN_TO_UNLOCK,
+  SWIPE_ONBOARDING_IMPROVE_MILESTONE,
+  SWIPE_ONBOARDING_REFINE_TARGET,
+];
+
+const SWIPE_ONBOARDING_TAG_SEED_MAX = 25;
+
+/**
+ * Test-only: clears legacy followed tags when opening "Use tags instead" (unfollows
+ * `includeTags` once per tags visit). Set toggle to `false` before shipping. You can
+ * also set `NEXT_PUBLIC_SWIPE_ONBOARDING_TEST_CLEAR_TAGS=true` in `.env.local` instead
+ * of using the toggle.
+ */
+const SWIPE_ONBOARDING_TEST_CLEAR_PRESELECTED_TAGS_TOGGLE = true;
+const shouldClearPreselectedTagsForSwipeOnboardingTest =
+  SWIPE_ONBOARDING_TEST_CLEAR_PRESELECTED_TAGS_TOGGLE ||
+  process.env.NEXT_PUBLIC_SWIPE_ONBOARDING_TEST_CLEAR_TAGS === 'true';
 
 function SwipeOnboardingPage(): ReactElement {
   const router = useRouter();
   const formRef = useRef<HTMLFormElement>(null as unknown as HTMLFormElement);
   const { isAuthReady, isLoggedIn } = useAuthContext();
   const { completeStep } = useOnboardingActions();
-  const [swipesCount, setSwipesCount] = React.useState(0);
-  const { data: cardsData, isPending: isCardsPending } =
-    useQuery<PopularFeedQueryData>({
-      queryKey: ['onboarding-swipe-popular-cards'],
-      queryFn: () =>
-        gqlClient.request(MOST_UPVOTED_FEED_QUERY, {
-          first: 80,
-          period: 30,
-        }),
-      enabled: isLoggedIn,
-      staleTime: 1000 * 60 * 2,
-    });
+  const [swipesCount, setSwipesCount] = useState(0);
+  const [milestoneBurstKey, setMilestoneBurstKey] = useState(0);
+  const [onboardingUiMode, setOnboardingUiMode] = useState<'swipe' | 'tags'>(
+    'swipe',
+  );
+  const [rightSwipedPostIds, setRightSwipedPostIds] = useState<Set<string>>(
+    () => new Set(),
+  );
+  const [dismissedOnboardingCardIds, setDismissedOnboardingCardIds] = useState<
+    Set<string>
+  >(() => new Set());
+  const swipeOnboardingTestTagsClearDoneForSessionRef = useRef(false);
+  const prevSwipesForMilestoneRef = useRef<number | null>(null);
+
+  const {
+    data: deckPosts = [],
+    isPending: isCardsPending,
+    refetch: refetchSwipeDeck,
+    isFetching: isSwipeDeckFetching,
+  } = useQuery<Post[]>({
+    queryKey: ['onboarding-swipe-popular-cards'],
+    queryFn: fetchSwipeOnboardingPopularDeck,
+    enabled: isLoggedIn,
+    staleTime: 1000 * 60 * 2,
+  });
   const {
     value: isSwipeOnboardingEnabled,
     isLoading: isSwipeOnboardingLoading,
@@ -118,9 +152,50 @@ function SwipeOnboardingPage(): ReactElement {
     await redirectToApp(router);
   }, [completeStep, router]);
 
-  const onSwipeAction = useCallback(() => {
-    setSwipesCount((value) => value + 1);
-  }, []);
+  const { feedSettings, isLoading: isFeedSettingsLoading } = useFeedSettings({
+    enabled: isLoggedIn,
+  });
+  const { onFollowTags, onUnfollowTags } = useTagAndSource({
+    origin: Origin.Onboarding,
+  });
+
+  const selectedTagCount = feedSettings?.includeTags?.length ?? 0;
+  const onboardingProgressCount =
+    onboardingUiMode === 'tags' ? selectedTagCount : swipesCount;
+
+  useEffect(() => {
+    const prev = prevSwipesForMilestoneRef.current;
+    prevSwipesForMilestoneRef.current = onboardingProgressCount;
+    if (prev === null) {
+      return;
+    }
+    const crossedMilestone = SWIPE_ONBOARDING_PROGRESS_MILESTONES.find(
+      (m) => prev < m && onboardingProgressCount >= m,
+    );
+    if (crossedMilestone !== undefined) {
+      setMilestoneBurstKey((k) => k + 1);
+    }
+  }, [onboardingProgressCount]);
+
+  const handleSwipeInteraction = useCallback(
+    (
+      direction: 'left' | 'right' | 'skip',
+      meta?: { onboardingCardId?: string },
+    ) => {
+      if (direction === 'left' || direction === 'right') {
+        setSwipesCount((value) => value + 1);
+        if (direction === 'right' && meta?.onboardingCardId) {
+          const cardId = meta.onboardingCardId;
+          setRightSwipedPostIds((prev) => {
+            const next = new Set(prev);
+            next.add(cardId);
+            return next;
+          });
+        }
+      }
+    },
+    [],
+  );
 
   const authOptionProps: AuthOptionsProps = useMemo(
     () => ({
@@ -142,18 +217,75 @@ function SwipeOnboardingPage(): ReactElement {
   );
   const onboardingCards = useMemo<OnboardingSwipeCard[]>(
     () =>
-      (cardsData?.page?.edges ?? []).map(({ node }) => ({
+      deckPosts.map((node) => ({
         id: node.id,
         title: node.title,
         image: node.image,
+        tags: node.tags,
         source: {
           name: node.source?.name,
           image: node.source?.image,
         },
       })),
-    [cardsData?.page?.edges],
+    [deckPosts],
   );
 
+  useEffect(() => {
+    if (onboardingUiMode !== 'tags') {
+      swipeOnboardingTestTagsClearDoneForSessionRef.current = false;
+      return;
+    }
+    if (!shouldClearPreselectedTagsForSwipeOnboardingTest) {
+      return;
+    }
+    if (swipeOnboardingTestTagsClearDoneForSessionRef.current) {
+      return;
+    }
+    const existing = feedSettings?.includeTags ?? [];
+    if (existing.length === 0) {
+      swipeOnboardingTestTagsClearDoneForSessionRef.current = true;
+      return;
+    }
+    swipeOnboardingTestTagsClearDoneForSessionRef.current = true;
+    onUnfollowTags({ tags: [...existing] }).catch(() => null);
+  }, [onboardingUiMode, feedSettings?.includeTags, onUnfollowTags]);
+
+  const tagsFromRightSwipes = useMemo(() => {
+    const seen = new Set<string>();
+    const ordered: string[] = [];
+    onboardingCards
+      .filter((card) => rightSwipedPostIds.has(card.id))
+      .forEach((card) => {
+        (card.tags ?? []).forEach((tag) => {
+          if (
+            !seen.has(tag) &&
+            ordered.length < SWIPE_ONBOARDING_TAG_SEED_MAX
+          ) {
+            seen.add(tag);
+            ordered.push(tag);
+          }
+        });
+      });
+    return ordered;
+  }, [onboardingCards, rightSwipedPostIds]);
+
+  useEffect(() => {
+    if (onboardingUiMode !== 'tags') {
+      return;
+    }
+    const included = new Set(feedSettings?.includeTags ?? []);
+    const toFollow = tagsFromRightSwipes.filter((t) => !included.has(t));
+    if (toFollow.length === 0) {
+      return;
+    }
+    onFollowTags({ tags: toFollow }).catch(() => null);
+  }, [
+    onboardingUiMode,
+    tagsFromRightSwipes,
+    feedSettings?.includeTags,
+    onFollowTags,
+  ]);
+
   if (!isAuthReady) {
     return <div className="min-h-dvh bg-background-default" />;
   }
@@ -182,96 +314,146 @@ function SwipeOnboardingPage(): ReactElement {
     );
   }
 
-  const progress = Math.min((swipesCount / 40) * 100, 100);
-  const progressPercent = Math.round(progress);
-  const canContinue = swipesCount >= MIN_SWIPES_TO_CONTINUE;
+  const canContinue =
+    onboardingUiMode === 'swipe'
+      ? swipesCount >= MIN_SWIPES_TO_CONTINUE
+      : swipesCount >= MIN_SWIPES_TO_CONTINUE ||
+        selectedTagCount >= MIN_SWIPES_TO_CONTINUE;
+
+  /** Placeholder uses `h-10` to match `ButtonSize.Medium` so the footer height stays fixed. */
+  const bottomContinueSlot = (
+    <div className="w-full min-w-0 self-stretch px-4">
+      {canContinue ? (
+        <Button
+          className="w-full min-w-0"
+          size={ButtonSize.Medium}
+          variant={ButtonVariant.Primary}
+          type="button"
+          onClick={() => {
+            onComplete().catch(() => null);
+          }}
+        >
+          Go to my feed
+        </Button>
+      ) : (
+        <div aria-hidden className="pointer-events-none h-10 w-full shrink-0" />
+      )}
+    </div>
+  );
 
   return (
-    <div className="flex min-h-dvh items-center justify-center bg-background-default px-4 py-6">
-      <HotAndColdModal
-        isOpen
-        showHeader={false}
-        showDefaultActions={false}
-        showAddHotTakeButton={false}
-        onSwipeAction={(direction) => {
-          if (direction === 'left' || direction === 'right') {
-            onSwipeAction();
-          }
-        }}
-        onboardingCards={onboardingCards}
-        onboardingCardsLoading={isCardsPending}
-        topSlot={
-          <div className="pointer-events-none mb-1 mt-2 w-[calc(100%-5rem)] max-w-[17.5rem] select-none self-center p-4">
-            <div className="mb-3 flex items-center justify-between">
-              <Typography bold type={TypographyType.Callout}>
-                Build your feed
-              </Typography>
-              <Logo
-                position={LogoPosition.Empty}
-                logoClassName={{ container: 'h-5' }}
-                linkDisabled
+    <div className="flex min-h-dvh flex-col items-center justify-end bg-background-default px-4 pb-6 pt-2">
+      {onboardingUiMode === 'swipe' ? (
+        <HotAndColdModal
+          isOpen
+          showHeader={false}
+          showDefaultActions={false}
+          showAddHotTakeButton={false}
+          dismissedOnboardingCardIds={dismissedOnboardingCardIds}
+          onDismissedOnboardingCardsChange={setDismissedOnboardingCardIds}
+          onboardingFeedRefetching={isSwipeDeckFetching}
+          onOnboardingFeedRetry={() => {
+            refetchSwipeDeck().catch(() => null);
+          }}
+          onSwipeAction={(direction, meta) => {
+            handleSwipeInteraction(direction, meta);
+          }}
+          onboardingCards={onboardingCards}
+          onboardingCardsLoading={isCardsPending}
+          headerSlot={
+            <div className="pointer-events-none flex w-full select-none items-center justify-between gap-2 px-4 py-2">
+              <Button
+                className="pointer-events-auto"
+                icon={<ArrowIcon className="-rotate-90" />}
+                size={ButtonSize.Small}
+                type="button"
+                variant={ButtonVariant.Tertiary}
+                onClick={() => {
+                  router.back();
+                }}
               />
-            </div>
-            <div className="mb-2 flex items-center justify-between">
-              <Typography bold type={TypographyType.Callout}>
-                Feed personalization
-              </Typography>
-              <Typography
-                color={TypographyColor.Secondary}
-                type={TypographyType.Footnote}
+              <Button
+                className="pointer-events-auto shrink-0"
+                size={ButtonSize.Small}
+                type="button"
+                variant={ButtonVariant.Tertiary}
+                onClick={() => {
+                  setOnboardingUiMode('tags');
+                }}
               >
-                {progressPercent}%
-              </Typography>
+                Use tags instead
+              </Button>
             </div>
-            <div className="relative h-1 w-full overflow-hidden rounded-50 bg-border-subtlest-tertiary">
-              <div
-                className="transition-width absolute inset-y-0 left-0 rounded-50 bg-accent-cabbage-default duration-300 ease-in-out"
-                style={{ width: `${progress}%` }}
+          }
+          topSlot={
+            <SwipeOnboardingProgressHeader
+              milestoneBurstKey={milestoneBurstKey}
+              progressCount={onboardingProgressCount}
+            />
+          }
+          bottomSlot={bottomContinueSlot}
+          onRequestClose={() => {
+            onComplete().catch(() => null);
+          }}
+        />
+      ) : (
+        <Modal
+          isOpen
+          className="tablet:!max-h-[calc(100vh-2rem)]"
+          onRequestClose={() => {
+            onComplete().catch(() => null);
+          }}
+          size={ModalSize.Small}
+        >
+          <Modal.Body className="flex min-h-0 w-full flex-1 flex-col overflow-hidden overflow-x-hidden bg-overlay-quaternary-onion !p-0 tablet:flex-none tablet:!overflow-x-visible">
+            <div className="pointer-events-none flex w-full shrink-0 select-none items-center justify-between gap-2 px-4 py-2">
+              <Button
+                className="pointer-events-auto"
+                icon={<ArrowIcon className="-rotate-90" />}
+                size={ButtonSize.Small}
+                type="button"
+                variant={ButtonVariant.Tertiary}
+                onClick={() => {
+                  router.back();
+                }}
               />
-            </div>
-            <Typography
-              className="mt-2"
-              color={TypographyColor.Tertiary}
-              type={TypographyType.Footnote}
-            >
-              {swipesCount} swipes
-            </Typography>
-          </div>
-        }
-        bottomSlot={
-          <div className="mt-10 px-4 pb-4">
-            <div className="mb-3 flex items-center gap-3 px-1">
-              <div className="border-accent-bacon-default/40 bg-accent-bacon-default/20 shadow-1 flex h-[4.75rem] flex-1 flex-col items-center justify-center gap-1 rounded-14 border px-2 text-accent-bacon-default">
-                <DownvoteIcon size={IconSize.Large} />
-                <span className="text-center font-bold typo-footnote">
-                  Not interesting
-                </span>
-              </div>
-              <div className="border-accent-cabbage-default/40 bg-accent-cabbage-default/20 shadow-1 flex h-[4.75rem] flex-1 flex-col items-center justify-center gap-1 rounded-14 border px-2 text-accent-cabbage-default">
-                <UpvoteIcon size={IconSize.Large} />
-                <span className="text-center font-bold typo-footnote">
-                  Interesting
-                </span>
-              </div>
-            </div>
-            {canContinue && (
               <Button
-                className="w-full"
-                size={ButtonSize.Medium}
-                variant={ButtonVariant.Primary}
+                className="pointer-events-auto shrink-0"
+                size={ButtonSize.Small}
+                type="button"
+                variant={ButtonVariant.Tertiary}
                 onClick={() => {
-                  onComplete().catch(() => null);
+                  setOnboardingUiMode('swipe');
                 }}
               >
-                Continue to my feed
+                Switch to swipe
               </Button>
-            )}
-          </div>
-        }
-        onRequestClose={() => {
-          onComplete().catch(() => null);
-        }}
-      />
+            </div>
+            <SwipeOnboardingProgressHeader
+              copyVariant="tags"
+              milestoneBurstKey={milestoneBurstKey}
+              progressCount={onboardingProgressCount}
+            />
+            <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+              <div className="flex min-h-0 min-w-0 flex-1 flex-col items-center overflow-y-auto overflow-x-hidden px-2 pb-2 pt-2 tablet:max-w-md tablet:self-center">
+                {isFeedSettingsLoading || !feedSettings ? (
+                  <div className="flex flex-1 items-center justify-center py-10">
+                    <Loader />
+                  </div>
+                ) : (
+                  <EditTag
+                    feedSettings={feedSettings}
+                    headline="Pick tags that are relevant to you"
+                  />
+                )}
+              </div>
+              <div className="relative z-10 shrink-0 border-t border-border-subtlest-tertiary bg-overlay-quaternary-onion pb-safe-or-2 pt-3 shadow-2">
+                {bottomContinueSlot}
+              </div>
+            </div>
+          </Modal.Body>
+        </Modal>
+      )}
     </div>
   );
 }

From b783ad4a553c3d9fc23991886e219ce40b1a5868 Mon Sep 17 00:00:00 2001
From: tomeredlich <tomer.redlich@gmail.com>
Date: Mon, 6 Apr 2026 18:00:36 +0300
Subject: [PATCH 3/3] feat(onboarding): polish swipe onboarding footer and hint
 controls

- Hide tags modal footer and bottom slot until continue unlocks (no empty chrome).

- Onboarding hint buttons: secondary default border/icon, size-14 + Large icons, wider gap.

Made-with: Cursor
---
 .../modals/hotTakes/HotAndColdModal.tsx       | 14 +++----
 packages/webapp/pages/onboarding/swipe.tsx    | 39 +++++++++----------
 2 files changed, 25 insertions(+), 28 deletions(-)

diff --git a/packages/shared/src/components/modals/hotTakes/HotAndColdModal.tsx b/packages/shared/src/components/modals/hotTakes/HotAndColdModal.tsx
index 95f70400403..d58821bd584 100644
--- a/packages/shared/src/components/modals/hotTakes/HotAndColdModal.tsx
+++ b/packages/shared/src/components/modals/hotTakes/HotAndColdModal.tsx
@@ -474,17 +474,17 @@ const OnboardingSwipeHintIcons = ({
   const rightSwipeEmphasized = rightVisualStrength > 0;
 
   return (
-    <div className="flex items-center justify-center gap-5 px-1">
+    <div className="flex items-center justify-center gap-6 px-1">
       <button
         type="button"
         aria-label="Not interesting"
         disabled={disabled}
         className={classNames(
-          'shadow-1 flex size-12 cursor-pointer items-center justify-center rounded-full border transition-all duration-150 ease-out',
+          'shadow-1 flex size-14 cursor-pointer items-center justify-center rounded-full border transition-all duration-150 ease-out',
           'disabled:cursor-not-allowed disabled:opacity-40',
           leftSwipeEmphasized
             ? 'opacity-100'
-            : 'border-border-subtlest-tertiary text-text-tertiary opacity-40 enabled:hover:border-accent-bacon-default enabled:hover:text-accent-bacon-default enabled:hover:opacity-100 enabled:focus-visible:border-accent-bacon-default enabled:focus-visible:text-accent-bacon-default enabled:focus-visible:opacity-100 enabled:active:border-accent-bacon-default enabled:active:text-accent-bacon-default enabled:active:opacity-100',
+            : 'border-border-subtlest-secondary text-text-secondary enabled:hover:border-accent-bacon-default enabled:hover:text-accent-bacon-default enabled:focus-visible:border-accent-bacon-default enabled:focus-visible:text-accent-bacon-default enabled:active:border-accent-bacon-default enabled:active:text-accent-bacon-default',
         )}
         style={{
           transform: `scale(${1 + leftVisualStrength * 0.1})`,
@@ -505,18 +505,18 @@ const OnboardingSwipeHintIcons = ({
         }}
         onClick={onNotInteresting}
       >
-        <MiniCloseIcon size={IconSize.Medium} />
+        <MiniCloseIcon size={IconSize.Large} />
       </button>
       <button
         type="button"
         aria-label="Interesting"
         disabled={disabled}
         className={classNames(
-          'shadow-1 flex size-12 cursor-pointer items-center justify-center rounded-full border transition-all duration-150 ease-out',
+          'shadow-1 flex size-14 cursor-pointer items-center justify-center rounded-full border transition-all duration-150 ease-out',
           'disabled:cursor-not-allowed disabled:opacity-40',
           rightSwipeEmphasized
             ? 'opacity-100'
-            : 'border-border-subtlest-tertiary text-text-tertiary opacity-40 enabled:hover:border-accent-avocado-default enabled:hover:text-accent-avocado-default enabled:hover:opacity-100 enabled:focus-visible:border-accent-avocado-default enabled:focus-visible:text-accent-avocado-default enabled:focus-visible:opacity-100 enabled:active:border-accent-avocado-default enabled:active:text-accent-avocado-default enabled:active:opacity-100',
+            : 'border-border-subtlest-secondary text-text-secondary enabled:hover:border-accent-avocado-default enabled:hover:text-accent-avocado-default enabled:focus-visible:border-accent-avocado-default enabled:focus-visible:text-accent-avocado-default enabled:active:border-accent-avocado-default enabled:active:text-accent-avocado-default',
         )}
         style={{
           transform: `scale(${1 + rightVisualStrength * 0.1})`,
@@ -537,7 +537,7 @@ const OnboardingSwipeHintIcons = ({
         }}
         onClick={onInteresting}
       >
-        <VIcon size={IconSize.Medium} />
+        <VIcon size={IconSize.Large} />
       </button>
     </div>
   );
diff --git a/packages/webapp/pages/onboarding/swipe.tsx b/packages/webapp/pages/onboarding/swipe.tsx
index 0773348810b..e4a56d23050 100644
--- a/packages/webapp/pages/onboarding/swipe.tsx
+++ b/packages/webapp/pages/onboarding/swipe.tsx
@@ -320,26 +320,21 @@ function SwipeOnboardingPage(): ReactElement {
       : swipesCount >= MIN_SWIPES_TO_CONTINUE ||
         selectedTagCount >= MIN_SWIPES_TO_CONTINUE;
 
-  /** Placeholder uses `h-10` to match `ButtonSize.Medium` so the footer height stays fixed. */
-  const bottomContinueSlot = (
+  const bottomContinueSlot = canContinue ? (
     <div className="w-full min-w-0 self-stretch px-4">
-      {canContinue ? (
-        <Button
-          className="w-full min-w-0"
-          size={ButtonSize.Medium}
-          variant={ButtonVariant.Primary}
-          type="button"
-          onClick={() => {
-            onComplete().catch(() => null);
-          }}
-        >
-          Go to my feed
-        </Button>
-      ) : (
-        <div aria-hidden className="pointer-events-none h-10 w-full shrink-0" />
-      )}
+      <Button
+        className="w-full min-w-0"
+        size={ButtonSize.Medium}
+        variant={ButtonVariant.Primary}
+        type="button"
+        onClick={() => {
+          onComplete().catch(() => null);
+        }}
+      >
+        Go to my feed
+      </Button>
     </div>
-  );
+  ) : null;
 
   return (
     <div className="flex min-h-dvh flex-col items-center justify-end bg-background-default px-4 pb-6 pt-2">
@@ -447,9 +442,11 @@ function SwipeOnboardingPage(): ReactElement {
                   />
                 )}
               </div>
-              <div className="relative z-10 shrink-0 border-t border-border-subtlest-tertiary bg-overlay-quaternary-onion pb-safe-or-2 pt-3 shadow-2">
-                {bottomContinueSlot}
-              </div>
+              {canContinue ? (
+                <div className="relative z-10 shrink-0 border-t border-border-subtlest-tertiary bg-overlay-quaternary-onion pb-safe-or-2 pt-3 shadow-2">
+                  {bottomContinueSlot}
+                </div>
+              ) : null}
             </div>
           </Modal.Body>
         </Modal>