"use client"; import React, { useEffect, useId, useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { useRef } from "react"; import { cn } from "@/lib/utils"; import { SparklesCore } from "@/components/ui/sparkles"; export const Cover = ({ children, className, }: { children?: React.ReactNode; className?: string; }) => { const [hovered, setHovered] = useState(false); const ref = useRef(null); const [containerWidth, setContainerWidth] = useState(0); const [beamPositions, setBeamPositions] = useState([]); useEffect(() => { if (ref.current) { setContainerWidth(ref.current?.clientWidth ?? 0); const height = ref.current?.clientHeight ?? 0; const numberOfBeams = Math.floor(height / 10); // Adjust the divisor to control the spacing const positions = Array.from( { length: numberOfBeams }, (_, i) => (i + 1) * (height / (numberOfBeams + 1)) ); setBeamPositions(positions); } }, [ref.current]); return (

setHovered(true)} onMouseLeave={() => setHovered(false)} ref={ref} className="relative hover:bg-neutral-900 group/cover inline-block dark:bg-neutral-900 bg-neutral-100 px-2 py-2 transition duration-200 rounded-sm" > {hovered && ( )} {beamPositions.map((position, index) => ( ))} {children}

); }; export const Beam = ({ className, delay, duration, hovered, width = 600, ...svgProps }: { className?: string; delay?: number; duration?: number; hovered?: boolean; width?: number; } & React.ComponentProps) => { const id = useId(); return ( ); }; export const CircleIcon = ({ className, delay, }: { className?: string; delay?: number; }) => { return (

); };

Featured

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Explore

Build

Cover

Created by

Installation

How to use

Dependencies

Tags