From 4278f1f0d7abaad630aef8d78c47beed7e98c0f9 Mon Sep 17 00:00:00 2001 From: Mus9617 Date: Fri, 7 Jun 2024 14:26:29 +0200 Subject: [PATCH] added Packacge TracingBeam #12 --- src/components/hero.tsx | 117 ++++++++++++++++++++++++++ src/components/ui/tracing-beam.tsx | 128 +++++++++++++++++++++++++++++ 2 files changed, 245 insertions(+) create mode 100644 src/components/hero.tsx create mode 100644 src/components/ui/tracing-beam.tsx diff --git a/src/components/hero.tsx b/src/components/hero.tsx new file mode 100644 index 0000000..e17ab79 --- /dev/null +++ b/src/components/hero.tsx @@ -0,0 +1,117 @@ +"use client"; +import React from "react"; +import { calsans } from "@/fonts/calsans"; +import Image from "next/image"; +import { twMerge } from "tailwind-merge"; +import { TracingBeam } from "@/components/ui/tracing-beam"; + +export function TracingBeamDemo() { + return ( + +
+ {dummyContent.map((item, index) => ( +
+

+ {item.badge} +

+ +

+ {item.title} +

+ +
+ {item?.image && ( + blog thumbnail + )} + {item.description} +
+
+ ))} +
+ + ); +} + +const dummyContent = [ + { + title: "Lorem Ipsum Dolor Sit Amet", + description: ( + <> +

+ Sit duis est minim proident non nisi velit non consectetur. Esse + adipisicing laboris consectetur enim ipsum reprehenderit eu deserunt + Lorem ut aliqua anim do. Duis cupidatat qui irure cupidatat incididunt + incididunt enim magna id est qui sunt fugiat. Laboris do duis pariatur + fugiat Lorem aute sit ullamco. Qui deserunt non reprehenderit dolore + nisi velit exercitation Lorem qui do enim culpa. Aliqua eiusmod in + occaecat reprehenderit laborum nostrud fugiat voluptate do Lorem culpa + officia sint labore. Tempor consectetur excepteur ut fugiat veniam + commodo et labore dolore commodo pariatur. +

+

+ Dolor minim irure ut Lorem proident. Ipsum do pariatur est ad ad + veniam in commodo id reprehenderit adipisicing. Proident duis + exercitation ad quis ex cupidatat cupidatat occaecat adipisicing. +

+

+ Tempor quis dolor veniam quis dolor. Sit reprehenderit eiusmod + reprehenderit deserunt amet laborum consequat adipisicing officia qui + irure id sint adipisicing. Adipisicing fugiat aliqua nulla nostrud. + Amet culpa officia aliquip deserunt veniam deserunt officia + adipisicing aliquip proident officia sunt. +

+ + ), + badge: "React", + image: + "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&q=80&w=3540&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + }, + { + title: "Lorem Ipsum Dolor Sit Amet", + description: ( + <> +

+ Ex irure dolore veniam ex velit non aute nisi labore ipsum occaecat + deserunt cupidatat aute. Enim cillum dolor et nulla sunt exercitation + non voluptate qui aliquip esse tempor. Ullamco ut sunt consectetur + sint qui qui do do qui do. Labore laborum culpa magna reprehenderit ea + velit id esse adipisicing deserunt amet dolore. Ipsum occaecat veniam + commodo proident aliqua id ad deserunt dolor aliquip duis veniam sunt. +

+

+ In dolore veniam excepteur eu est et sunt velit. Ipsum sint esse + veniam fugiat esse qui sint ad sunt reprehenderit do qui proident + reprehenderit. Laborum exercitation aliqua reprehenderit ea sint + cillum ut mollit. +

+ + ), + badge: "Changelog", + image: + "https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&q=80&w=3540&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + }, + { + title: "Lorem Ipsum Dolor Sit Amet", + description: ( + <> +

+ Ex irure dolore veniam ex velit non aute nisi labore ipsum occaecat + deserunt cupidatat aute. Enim cillum dolor et nulla sunt exercitation + non voluptate qui aliquip esse tempor. Ullamco ut sunt consectetur + sint qui qui do do qui do. Labore laborum culpa magna reprehenderit ea + velit id esse adipisicing deserunt amet dolore. Ipsum occaecat veniam + commodo proident aliqua id ad deserunt dolor aliquip duis veniam sunt. +

+ + ), + badge: "Launch Week", + image: + "https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&q=80&w=3506&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + }, +]; diff --git a/src/components/ui/tracing-beam.tsx b/src/components/ui/tracing-beam.tsx new file mode 100644 index 0000000..049762a --- /dev/null +++ b/src/components/ui/tracing-beam.tsx @@ -0,0 +1,128 @@ +"use client"; +import React, { useEffect, useRef, useState } from "react"; +import { + motion, + useTransform, + useScroll, + useVelocity, + useSpring, +} from "framer-motion"; +import { cn } from "@/lib/utils"; + +export const TracingBeam = ({ + children, + className, +}: { + children: React.ReactNode; + className?: string; +}) => { + const ref = useRef(null); + const { scrollYProgress } = useScroll({ + target: ref, + offset: ["start start", "end start"], + }); + + const contentRef = useRef(null); + const [svgHeight, setSvgHeight] = useState(0); + + useEffect(() => { + if (contentRef.current) { + setSvgHeight(contentRef.current.offsetHeight); + } + }, []); + + const y1 = useSpring( + useTransform(scrollYProgress, [0, 0.8], [50, svgHeight]), + { + stiffness: 500, + damping: 90, + } + ); + const y2 = useSpring( + useTransform(scrollYProgress, [0, 1], [50, svgHeight - 200]), + { + stiffness: 500, + damping: 90, + } + ); + + return ( + +
+ 0 + ? "none" + : "rgba(0, 0, 0, 0.24) 0px 3px 8px", + }} + className="ml-[27px] h-4 w-4 rounded-full border border-netural-200 shadow-sm flex items-center justify-center" + > + 0 ? "white" : "var(--emerald-500)", + borderColor: + scrollYProgress.get() > 0 ? "white" : "var(--emerald-600)", + }} + className="h-2 w-2 rounded-full border border-neutral-300 bg-white" + /> + + +
+
{children}
+ + ); +};