Interactive Layout
Makes the UI itself part of the content — sliders, carousels, tabs, and live controls that let users explore rather than just read. Engagement replaces passive consumption.
AI Prompt
Build an interactive SaaS product page in Next.js with Tailwind CSS. Include these four interactive zones: (1) Animated counter section — 3 stat numbers that count up from 0 when they enter the viewport using IntersectionObserver. Use `requestAnimationFrame` for smooth easing. (2) Feature tabs — a row of 4 tab buttons with an `activeTab` state. Switching tabs uses `framer-motion AnimatePresence` with a `x: 20 → 0` slide + `opacity: 0 → 1` enter animation. Each tab panel shows a different product screenshot mockup. (3) Before/After comparison slider — two overlapping div layers with a draggable vertical divider. Use `onMouseDown` + `onMouseMove` on a container `ref` to calculate divider position as a percentage. Left panel: "Before" (old design, desaturated). Right panel: "After" (new design, full color). Divider: a white vertical bar with a drag handle circle at center. (4) Pricing toggle — Monthly/Annual with `useSpring` from `framer-motion` animating the toggle thumb, and prices that update instantly. Use `overflow-hidden` on tab panel containers to prevent layout shift. All interactions must work on touch with `onTouchStart/onTouchMove`. Add `prefers-reduced-motion` checks before applying animations.