feat(onboarding): Patchy developer persona quiz step

packages/shared/src/features/onboarding/shared/FunnelStepper.tsx

@@ -34,6 +34,7 @@ import {
   FunnelOrganicSignup,
   FunnelBrowserExtension,
   FunnelUploadCv,
+  FunnelPersonaQuiz,
 } from '../steps';
 import { FunnelFact } from '../steps/FunnelFact';
 import { FunnelCheckout } from '../steps/FunnelCheckout';
@@ -79,6 +80,7 @@ const stepComponentMap = {
   [FunnelStepType.PlusCards]: FunnelPlusCards,
   [FunnelStepType.BrowserExtension]: FunnelBrowserExtension,
   [FunnelStepType.UploadCv]: FunnelUploadCv,
+  [FunnelStepType.PersonaQuiz]: FunnelPersonaQuiz,
 } as const;
 
 function FunnelStepComponent(props: {

packages/shared/src/features/onboarding/steps/FunnelPersonaQuiz.module.css

@@ -0,0 +1,170 @@
+/* Micro-interactions for the Patchy persona quiz. Scoped via CSS modules. */
+
+@keyframes patchy-float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+@keyframes patchy-bounce {
+  0% {
+    transform: translateY(0) scale(1);
+  }
+  35% {
+    transform: translateY(-14px) scale(1.16);
+  }
+  60% {
+    transform: translateY(0) scale(0.96);
+  }
+  100% {
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes patchy-wiggle {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+  20% {
+    transform: rotate(-11deg);
+  }
+  40% {
+    transform: rotate(9deg);
+  }
+  60% {
+    transform: rotate(-6deg);
+  }
+  80% {
+    transform: rotate(4deg);
+  }
+}
+
+@keyframes patchy-tilt {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(-15deg) translateY(-4px);
+  }
+}
+
+@keyframes question-in {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes dot-blink {
+  0%,
+  80%,
+  100% {
+    opacity: 0.25;
+    transform: scale(0.7);
+  }
+  40% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes reveal-spring {
+  0% {
+    opacity: 0;
+    transform: scale(0.4);
+  }
+  60% {
+    opacity: 1;
+    transform: scale(1.15);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes reveal-glow {
+  0%,
+  100% {
+    filter: drop-shadow(0 0 28px var(--persona-glow));
+  }
+  50% {
+    filter: drop-shadow(0 0 64px var(--persona-glow));
+  }
+}
+
+@keyframes reveal-rise {
+  from {
+    opacity: 0;
+    transform: translateY(14px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.float {
+  animation: patchy-float 3s ease-in-out infinite;
+}
+
+.bounce {
+  animation: patchy-bounce 0.5s ease;
+}
+
+.wiggle {
+  animation: patchy-wiggle 0.5s ease;
+}
+
+.tilt {
+  animation: patchy-tilt 0.5s ease;
+}
+
+.questionIn {
+  animation: question-in 0.35s ease both;
+}
+
+.dot {
+  animation: dot-blink 1.2s ease-in-out infinite;
+}
+
+.revealEmoji {
+  animation: reveal-spring 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both,
+    reveal-glow 2.4s ease-in-out 0.6s infinite;
+}
+
+.revealName {
+  animation: reveal-rise 0.5s ease 0.15s both;
+}
+
+.revealTagline {
+  animation: reveal-rise 0.5s ease 0.3s both;
+}
+
+.revealActions {
+  animation: reveal-rise 0.5s ease 0.45s both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .float,
+  .bounce,
+  .wiggle,
+  .tilt,
+  .questionIn,
+  .dot,
+  .revealEmoji,
+  .revealName,
+  .revealTagline,
+  .revealActions {
+    animation: none;
+  }
+}