Tracing Beam
A tracing beam that will follow as long as you scroll. Currently a lil buggy but will be improved soon.


# Preview

Preview of element and code usage

#1 Add TracingBeam code

components-stuff/tracing-beam.tsx

"use client";

import React from "react";
import { motion, useScroll, useSpring } from "framer-motion";

const TracingBeam: React.FC = () => {
  const { scrollYProgress } = useScroll();
  const scaleY = useSpring(scrollYProgress, { stiffness: 60, damping: 15 });

  return (
    <div className="absolute top-0 left-0 bottom-0 w-0.5  bg-gray-400 bg-opacity-50">

      <motion.div
        className="absolute top-0 left-0 bottom-0 w-full bg-gradient-to-t from-indigo-600 to-indigo-800"
        style={{ scaleY, transformOrigin: 'top' }}
      />
    </div>
  );
};

export default TracingBeam;

Done! 🎉
Nice work, you're all set!

Check out all components