[V0_FILE]typescriptreact:file="components/ui/beam-button.tsx" "use client" import * as React from "react" import { motion, useMotionTemplate, useMotionValue } from "framer-motion" import { cn } from "@/lib/utils" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" const beamButtonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 disabled:pointer-events-none disabled:opacity-50 dark:focus-visible:ring-slate-300", { variants: { variant: { default: "bg-white text-slate-900 hover:bg-slate-100 dark:bg-black dark:text-slate-100 dark:hover:bg-slate-800 border border-slate-200 dark:border-slate-700 hover:", outline: "border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-700 dark:bg-black dark:hover:bg-slate-800 dark:hover:text-slate-50", ghost: "hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-50 border border-transparent", }, size: { default: "h-9 px-4 py-2", sm: "h-8 px-3 text-xs", lg: "h-10 px-8", icon: "h-9 w-9", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) interface BeamButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean beamProps?: { beamColor?: string glowColor?: string hoverColor?: string } } const BeamButton = React.forwardRef( ({ className, variant, size, asChild = false, beamProps = {}, children, ...props }, ref) => { const Comp = asChild ? Slot : "button" const [hovered, setHovered] = React.useState(false) const mouseX = useMotionValue(0) const mouseY = useMotionValue(0) const { beamColor = "#3b82f6", glowColor = "rgba(59, 130, 246, 0.5)", hoverColor = "rgba(59, 130, 246, 0.2)", } = beamProps const handleMouseMove = (e: React.MouseEvent) => { const rect = e.currentTarget.getBoundingClientRect() mouseX.set(e.clientX - rect.left) mouseY.set(e.clientY - rect.top) } const glowStyle = useMotionTemplate`radial-gradient( 120px circle at ${mouseX}px ${mouseY}px, ${glowColor}, transparent 80% )` return ( setHovered(true)} onMouseLeave={() => setHovered(false)} > {children} ) }, ) BeamButton.displayName = "BeamButton" export { BeamButton, beamButtonVariants } [V0_FILE]typescriptreact:file="components/ui/beam-card.tsx" "use client" import * as React from "react" import { motion, useMotionTemplate, useMotionValue } from "framer-motion" import { cn } from "@/lib/utils" interface BeamCardProps extends React.HTMLAttributes { beamColor?: string glowColor?: string borderColor?: string hoverColor?: string } export const BeamCard = React.forwardRef( ( { className, children, beamColor = "#3b82f6", glowColor = "rgba(59, 130, 246, 0.5)", borderColor = "bg-gray-300 dark:bg-gray-700", hoverColor = "rgba(59, 130, 246, 0.2)", ...props }, ref, ) => { const [hovered, setHovered] = React.useState(false) const mouseX = useMotionValue(0) const mouseY = useMotionValue(0) const handleMouseMove = (e: React.MouseEvent) => { const rect = e.currentTarget.getBoundingClientRect() mouseX.set(e.clientX - rect.left) mouseY.set(e.clientY - rect.top) } const glowStyle = useMotionTemplate`radial-gradient( 150px circle at ${mouseX}px ${mouseY}px, ${glowColor}, transparent 80% )` return ( setHovered(true)} onMouseLeave={() => setHovered(false)} animate={{ background: hovered ? hoverColor : borderColor }} {...props} >

{children}

) }, ) BeamCard.displayName = "BeamCard" [V0_FILE]typescriptreact:file="page.tsx" import { Zap, Github, Twitter } from "lucide-react" import { BeamButton } from "@/components/ui/beam-button" import { BeamCard } from "@/components/ui/beam-card" function Home() { return (

{/* Feature Card */}

Amazing Feature

Experience the power of our cutting-edge technology with this amazing feature.

Learn More {/* Pricing Card */}

Pro Plan

$49/month

Advanced Features
Priority Support
Custom Integrations

Choose Plan {/* Contact Card */}

Get in Touch

Have questions? Our team is here to help you get started.

) } export default Home

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This