ScrollButton

Animated jump-to-bottom button for chat interfaces. Fades in/out with framer-motion.

Use and inspectUse this as a presentational interface around your own submit, stream, or state handlers. Reset preview only remounts the local example; it does not send a request or connect to a model.Next: inspect the source and wire its callback to a bounded backend action.

ScrollButtonAnimated jump-to-bottom button for chat interfaces. Fades in/out with framer-motion.

"use client";
import { AnimatePresence, motion } from "framer-motion";

type ScrollButtonProps = {
  onClick: () => void;
  visible: boolean;
};

export function ScrollButton({ onClick, visible }: ScrollButtonProps) {
  return (
    <AnimatePresence>
      {visible && (
        <motion.button
          className="pk-scroll-btn"
          onClick={onClick}
          initial={{ opacity: 0, y: 8 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: 8 }}
          transition={{ duration: 0.18 }}
          aria-label="Jump to bottom"
        >
          ↓
        </motion.button>
      )}
    </AnimatePresence>
  );
}

Install

npm install framer-motion

This component requires framer-motion.

Props

Prop	Type	Default	Description
`onClick`*	`() => void`	—	Called when button is clicked
`visible`*	`boolean`	—	Controls button visibility with animation