Animierter Video-Tooltip mit Typoskript und Framer-Motion

Video Tooltip ist eine animierte Komponente, die aktiviert wird, wenn Benutzer mit der Maus über einen Avatar fahren.

Diese Komponente zeigt ein kurzes Video an, in dem sich die Person vorstellt oder zusätzlichen Kontext liefert und so eine persönliche und interaktive Note verleiht.

Es ist besonders nützlich, um unvergessliche Benutzererlebnisse zu schaffen und schnelle Einblicke in Teammitglieder, Redner oder Influencer zu bieten, ohne dass zusätzliche Klicks erforderlich sind.

Demo

Quellcode

video-tooltip.tsx

import { useState, useCallback, useMemo } from „react“;
import { motion, useTransform, AnimatePresence, useMotionValue, useSpring } from „framer-motion“;
import { cn } from „@/lib/utils“;

Schnittstelle TooltipItem {
  ID: Nummer;
  Name: Zeichenfolge;
  Bezeichnung: string;
  Bild: Zeichenfolge;
  Video: Zeichenfolge;
  Text: Zeichenfolge;
}

Schnittstelle VideoTooltipProps {
  Elemente: TooltipItem[];
  Klassenname?: string;
}

export const VideoTooltip = ({ items, className = "" }: VideoTooltipProps) => {
  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
  const [showText, setShowText] = useState(false);
  const springConfig = useMemo(
    () => ({
      Steifigkeit: 100,
      Dämpfung: 5,
    }),
    []
  );

  // Bewegungs-Setup
  const x = useMotionValue(0);
  const translatorX = useSpring(useTransform(x, [-100, 100], [-50, 50]), springConfig);
  // Event-Handler mit useCallback optimieren
  const handleMouseMove = useCallback(
    (Ereignis: React.MouseEvent<HTMLElement>) => {
      const halfWidth = event.currentTarget.offsetWidth / 2;
      x.set(event.nativeEvent.offsetX - halfWidth);
    },
    [X]
  );

  zurückkehren (
    <div className={cn("flex items-center gap-2", className)}>
      {items.map((item) => (
        <div className="-mr-4 relative Gruppe" key={item.name} onMouseEnter={() => setHoveredIndex(item.id)} onMouseLeave={() => setHoveredIndex(null)}>
          <AnimatePresence mode="popLayout">
            {hoveredIndex === item.id && (
              <motion.div
                initial={{ Deckkraft: 0, y: 20, Maßstab: 0,6 }}
                animieren={{
                  Deckkraft: 1,
                  y: 0,
                  Maßstab: 1,
                  Übergang: {
                    Steifigkeit: 260,
                    Dämpfung: 10,
                    Dauer: 0,3,
                  },
                  width: showText ? „300px“: „96px“,
                  Höhe: showText ? „auto“: „96px“,
                }}
                exit={{ Deckkraft: 0, y: 20, Maßstab: 0,6 }}
               >




          

            
        <script>
  // Detect dark theme
  var iframe = document.getElementById('tweet-1876277735032848773-256');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1876277735032848773&theme=dark"
  }

</script>

Das obige ist der detaillierte Inhalt vonAnimierter Video-Tooltip mit Typoskript und Framer-Motion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!